Question

如何使用jquery将行和列添加到中间？

我想在单击表格中添加新按钮时添加行。

当我点击删除按钮时，我想删除该行。

请检查其中的jquery函数。

<tr>
    <td>Education</td> 
    <td></td>
    <td></td>
    <td></td>
</tr> 
<tr>
    <td>School Name</td>
    <td>Degree/Diploma</td>
    <td>Field(s)of Study </td>
    <td>Date of Completion </td>
</tr>
<br>
<tr id="gradingMaster">
    <td> 
        <input type="text" id="firstname1" name="" maxlength="200" class="input-large" style="height:27px; " value="${param.firstname}" onblur="letterOnly(this);" onfocus="this.value;"/>          
        <p id="firstname" style="color: red"/>
        <html:errors property="firstname"/>
    </td>
    <td> 
        <input type="text" id="firstname1" name="" maxlength="200" class="input-large" style="height:27px; " value="${param.firstname}" onblur="letterOnly(this);" onfocus="this.value;"/>          
        <p id="firstname" style="color: red"/>
        <html:errors property="firstname"/>
    </td>
    <td> 
        <input type="text"  class="input-large datepicker" style="height:27px;" readonly="true" id="datepicker3" name="dateofjoining"  value="${param.dateofjoining}"/>
        <html:errors property="dateofjoining"/>
    </td>
    <td>  
        <input type="text"  class="input-large datepicker" style="height:27px;" readonly="true" id="datepicker3" name="dateofjoining"  value="${param.dateofjoining}"/>
        <html:errors property="dateofjoining"/></td>
    </tr> 
    <tr id="education1321232"></tr>
    <tr>
        <td>
           <button type="button" class="btn btn-info" id="addneweducation">Add New</button>
        </td>
    </tr> 
  </tbody>

Jquery的

$(document).ready(function() { alert(4); var c = 1; $("#addneweducation").click(function() { alert(12); // $('#myTable').find('tbody:last') // var newtr = $(document.createElement('tr')); $('
<tr>some more HTML here</tr>').appendTo('tbody'); // var table = document.getElementById("education1321232"); // var rowCount = table.rows.length; // var row = table.insertRow(rowCount); // alert(rowCount); // row.append('
<td>
  <input type="text" name="" maxlength="200" class="input-large" style="height:27px; " />
</td>'); //// // row.append('
<td>
  <input type="text" name="" maxlength="200" class="input-large" style="height:27px; " />
</td>'); // row.append('
<td>
  <input type="text" name="" maxlength="200" class="input-large" style="height:27px; " />
</td>'); // row.append('
<td>
  <input type="text" name="" maxlength="200" class="input-large" style="height:27px; " />
</td>'); // ++c; // row.appendChild("#employeetable"); // ('#employeetable').find('tbody:last').appendTo("#employeetable tbody"); }); });

Answer 1

您可以使用.append()或.appendTo()之类的内容添加行。例如：

$('#addneweducation').click(function () {
    $('<tr>some more HTML here</tr>').appendTo('tbody');
});

看起来你的按钮实际上在桌子里面，所以也许你想要更像这样的东西：

$('#addneweducation').click(function () {
    $(this).closest('tr').prev('tr').after('<tr>some more HTML here</tr>');
});

这会在tr之后插入特定的HTML，而tr位于包含该按钮的remove之前。您可以使用various other functions和选择器来标识插入新元素的其他位置。

为了删除一行，假设行包含一个按钮来删除它（并假设，例如，为了这个例子，该按钮的类为$(document).on('click', '.remove', function () { $(this).closest('tr').remove(); });），这样的事情会起作用：

tr

它基本上找到包含单击按钮的{{1}}并删除该元素。

如何使用jquery动态添加行

1 个答案: