php - jqueryでHTMLTRブロックを削除/削除する方法

Question

私はjQueryにこのコードを持っており、trブロックといくつかの入力を動的に追加します。これは正常に機能します。しかし、削除機能が機能していません。機能させるために助けていただければ幸いです。

<script type="text/javascript">
var counter = 1;
function remove_row(indice){
    alert(indice);
    $("#" + indice).remove();
    counter--;
} 
function addTableRow(jQtable){
    jQtable.each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = "<tr id='row_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Apellido(s)</strong></td><td><input type='text' name='apellidos_" + counter + "' id='apellidos_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td>  <td class='borde'>&nbsp;<br/>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Nombre(s):</strong></td><td align='left'><input type='text' name='nombres_" + counter + "' id='nombres_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Cédula:</strong></td><td align='left'><select name='pre_ced_" + counter + "' id='pre_ced_" + counter + "'><option selected='selected' value='0'> Seleccione... </option><option value='3'>V</option><option value='4'>E</option></select> - <input type='text' name='suf_ced_" + counter + "' id='suf_ced_" + counter + "'  width='170'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Teléfono:</strong></td><td align='left'><input type='text' name='pre_tel1_" + counter + "' id='pre_tel1_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel1_" + counter + "' id='suf_tel1_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Celular:</strong></td><td align='left'><input type='text' name='pre_tel2_" + counter + "' id='pre_tel2_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel2_" + counter + "' id='suf_tel2_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Fax/Otro:</strong></td><td align='left'><input type='text' name='pre_tel3_" + counter + "' id='pre_tel3_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel3_" + counter + "' id='suf_tel3_" + counter + "' /></td><td class='requerido'>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Correo:</strong></td><td align='left'><input type='text' name='correo_" + counter + "' id='correo_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td align='right'><strong>Profesión:</strong></td><td align='left'><input type='text' name='profesion_" + counter + "' id='profesion_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr><td class='borde'>&nbsp;</td><td>&nbsp;</td><td><input type='button' value='Eliminar Participante' onclick=\"remove_row('row_" + counter + "');\"> <input type='button' value='Mismos Datos Facturación'></td><td>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr><td colspan='5'  class='borde' align='center'>&nbsp;</td></tr>";
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
    counter++;
}
</script>

そして、これが私のhtmlです

<form action="inscripcion.php" method="post" enctype="multipart/form-data" name="inscribir" id="inscribir">
      <div id="formdiv">
      <table border="0" align="center" cellspacing="0" id="myTable" name="myTable">
      <tr id="row_0">
          <td colspan="5"  class="borde" align="center" >
          Fecha <?php echo date("d/m/Y"); ?>
          </td>
      </tr>
      <tr>
          <td colspan="5"  class="borde" align="center">
          Evento a Inscribirse
          </td>      
      </tr>

      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Taller:
          </strong></td>
          <td align="left"><label for="taller"></label>
            <select name="taller" id="taller" style="width:300px" onchange="xajax_cargar(this.value);">
              <option selected="selected" value="0"> Seleccione... </option>
              <?php
do {  
?>
              <option value="<?php echo $row_cursos['idcurso']?>"><?php echo $row_cursos['titulo']?></option>
              <?php
} while ($row_cursos = mysql_fetch_assoc($cursos));
  $rows = mysql_num_rows($cursos);
  if($rows > 0) {
      mysql_data_seek($cursos, 0);
      $row_cursos = mysql_fetch_assoc($cursos);
  }
?>
            </select></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Período/Ciudad:
          </strong></td>
          <td align="left">
          <div id="ciudadesyfechas">
            <center>Seleccione Taller Primero</center>
          </div>
          </td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>

      <tr>
          <td colspan="5"  class="borde" align="center">
          Datos a Facturar
          </td>      
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Razón Social:
          </strong></td>
          <td align="left"><label for="razon_social"></label>
            <input type="text" name="razon_social" id="razon_social" style="width:300px"/>

          </td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          RIF/CI:
          </strong></td>
          <td align="left"><label for="razon_social"></label>
            <label for="pre_rif"></label>
            <select name="pre_rif" id="pre_rif">
            <option selected="selected" value="0">
            Seleccione...
            </option>
            <option value="1">J</option>
            <option value="2">G</option>
            <option value="3">V</option>
            <option value="4">E</option>
          </select> 
            -
            <label for="suf_rif"></label>
          <input type="text" name="suf_rif" id="suf_rif"  style="width:120px"/> 
          -
          <input type="text" name="suf2_rif" id="suf2_rif" style="width:40px"/></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Teléfono:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel1" id="pre_tel1" style="width:60px"/> 
          - 
          <label for="suf_tel1"></label>
          <input type="text" name="suf_tel1" id="suf_tel1" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Celular:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel2" id="pre_tel2" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel2" id="suf_tel2" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Fax/Otro:
          </strong></td>
          <td align="left">

          <input type="text" name="pre_tel3" id="pre_tel3" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel3" id="suf_tel3" /></td>
          <td class="requerido">&nbsp;</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Dirección:
          </strong></td>
          <td align="left">
          <input type="text" name="direccion" id="direccion" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Correo:
          </strong></td>
          <td align="left">

          <label for="correo"></label>
          <input type="text" name="correo" id="correo" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td colspan="5"  class="borde" align="center">
          Participante(s)
          </td>      
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Apellido(s):
          </strong></td>
          <td align="left">


          <input type="text" name="apellidos_0" id="apellidos_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Nombre(s):
          </strong></td>
          <td align="left">


          <input type="text" name="nombres_0" id="nombres_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Cédula:
          </strong></td>
          <td align="left"><select name="pre_ced" id="pre_ced">
            <option selected="selected" value="0"> Seleccione... </option>

            <option value="3">V</option>
            <option value="4">E</option>
          </select>
            - 
            <label for="suf_ced"></label>
            <input type="text" name="suf_ced_0" id="suf_ced_0"  width="170"/></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Teléfono:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel1_0" id="pre_tel1_0" style="width:60px"/> 
          - 
          <label for="suf_tel1"></label>
          <input type="text" name="suf_tel1_0" id="suf_tel1_0" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Celular:
          </strong></td>
          <td align="left">
          <input type="text" name="pre_tel2_0" id="pre_tel2_0" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel2_0" id="suf_tel2_0" /></td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Fax/Otro:
          </strong></td>
          <td align="left">

          <input type="text" name="pre_tel3_0" id="pre_tel3_0" style="width:60px"/> 
          - 

          <input type="text" name="suf_tel3_0" id="suf_tel3_0" /></td>
          <td class="requerido">&nbsp;</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Correo:
          </strong></td>
          <td align="left">


          <input type="text" name="correo_0" id="correo_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right"><strong>
          Profesión:
          </strong></td>
          <td align="left">


          <input type="text" name="profesion_0" id="profesion_0" style="width:300px"/>
</td>
          <td class="requerido">*</td>
          <td class="borde">&nbsp;
          </td>
      </tr>
      <tr>
          <td class="borde">&nbsp;

          </td>
          <td align="right">&nbsp;</td>
          <td align="left"><input type="button" value="Agregar Participante" id="add" name="add" onclick="addTableRow($('#myTable'));"/> <input type="button" value="Mismos Datos Facturación" /></td>
          <td class="requerido">&nbsp;</td>
          <td class="borde">&nbsp;
          </td>
      </tr>

      <tr>
          <td colspan="5"  class="borde" align="center">
          &nbsp;<input type="hidden" id="num_campos" name="num_campos" value="0" />
<input type="hidden" id="cant_campos" name="cant_campos" value="0" />
          </td>      
      </tr>

      </table>
     <table align="center" border="0">
     <tr>
     <td><input type="submit" name="Submit" id="button" value="Guardar" /> <input type="reset" name="button2" id="button2" value="Restablecer" />
     </td>
     </tr>
     </table>
      </form>

---

解決

最後に、生成されたものに加えて、すべてのtr行にインデックスを付けることがわかりました。

function eliminar(index) {

    var r=confirm("¿Seguro Desea Eliminar este Participante?");
    if (r==true)
      {
            for (n = 0; n < 10; n++)
            {
                $('tr#row' + n + "_" + index).remove();
                                counter--;
            }
      }

}

function addTableRow(jQtable){
    jQtable.each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = "<tr id='row0_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Apellido(s)</strong></td><td><input type='text' name='apellidos_" + counter + "' id='apellidos_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td>  <td class='borde'>&nbsp;<br/>&nbsp;</td></tr><tr  id='row1_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Nombre(s):</strong></td><td align='left'><input type='text' name='nombres_" + counter + "' id='nombres_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row2_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Cédula:</strong></td><td align='left'><select name='pre_ced_" + counter + "' id='pre_ced_" + counter + "'><option selected='selected' value='0'> Seleccione... </option><option value='3'>V</option><option value='4'>E</option></select> - <input type='text' name='suf_ced_" + counter + "' id='suf_ced_" + counter + "'  width='170'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr id='row3_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Teléfono:</strong></td><td align='left'><input type='text' name='pre_tel1_" + counter + "' id='pre_tel1_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel1_" + counter + "' id='suf_tel1_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr id='row4_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Celular:</strong></td><td align='left'><input type='text' name='pre_tel2_" + counter + "' id='pre_tel2_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel2_" + counter + "' id='suf_tel2_" + counter + "' /></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row5_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Fax/Otro:</strong></td><td align='left'><input type='text' name='pre_tel3_" + counter + "' id='pre_tel3_" + counter + "' style='width:60px'/> - <input type='text' name='suf_tel3_" + counter + "' id='suf_tel3_" + counter + "' /></td><td class='requerido'>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr  id='row6_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Correo:</strong></td><td align='left'><input type='text' name='correo_" + counter + "' id='correo_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row7_" + counter + "'><td class='borde'>&nbsp;</td><td align='right'><strong>Profesión:</strong></td><td align='left'><input type='text' name='profesion_" + counter + "' id='profesion_" + counter + "' style='width:300px'/></td><td class='requerido'>*</td><td class='borde'>&nbsp;</td></tr><tr  id='row8_" + counter + "'><td class='borde'>&nbsp;</td><td>&nbsp;</td><td><input type='button' value='Eliminar Participante' onclick=\"eliminar('" + counter + "');\"> <input type='button' value='Mismos Datos Facturación'></td><td>&nbsp;</td><td class='borde'>&nbsp;</td></tr><tr id='row9_" + counter + "'><td colspan='5'  class='borde' align='center'>&nbsp;</td></tr>";
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
    counter++;
}

これが関数です。必要なのは、合計行数を含む非表示の値だけです。

Answer 1

私の質問を解決策で更新しました

Answer 2

動的に追加された html 要素にイベントを追加するには、 jquery onを使用する必要があります。remove イベントをアタッチするボタンにクラスを割り当てます。

$(document).on('click', '.remove', function (){

    $(this).remove();
    counter--;
} 

Answer 3

まず第一に、その関数をどこで呼び出しているのかまだわかりません。付随するイベントはないようです。しかし、クリックイベントなどで別の場所でトリガーしているとしましょう。

'row_'+counter の行の ID を割り当てました。したがって、id="row_2" または同様のものがあります。

あなたは .remove() 関数です（そして、サミュエルはそれを .remove() にすることについて正しかったです）呼び出す必要があります

$('tr#row_' + index).remove();

jQuery のドキュメントに従って .replaceWith("") を使用することもできます。彼らは同じことをします。

Answer 4

間のスペースを削除する必要があります.remove ();

$("#" + indice).remove ();

次のようにする必要があります。

$("#" + indice).remove();