Question

我想在这个表中添加和删除行，最后如何实现这个

<table align="left" id="postq" style="display: none;" border="2" style="width: 519px">
    <tr>
    <th align="left"><label id="Label1"> Kind of Work </label></th>
    <th align="left"><label id="Label1"> Name Of The Client </label></th>
    <th align="left"><label id="Label1">Name of Firm / Organisation </label></th>
    </tr>
    <tr>
    <td> 
    <input title="Enter Kind Of work 1" readonly="readonly" onclick="if(this.value!=''){this.value='';opendrop1();}else{opendrop1();}" id="other_work1" name="other_work1" type="text" size="30" <?php if (isset($errors)) { echo 'value="'.htmlentities($_POST['other_work1']).'"'; } ?>  >                
    </td>                       
     <td><input name="client_name1" type="text" id="client_name1" size="40" /></td>
     <td><input name="firm_name1" type="text" id="firm_name1" size="40"/></td>
    </tr>
    </table>

我添加了这个脚本

 <!--add kind of work rows-->
    <script type="text/javascript">
      $(document).ready(function () {
     var counter = 2;
    $("#addButton").click(function () {

                if (counter > 10) {
                    alert("Only 10 textboxes allow");
                    return false;
                }            
                var $row = $('<tr>');//$('<tr id="row'+counter+'"></tr>')
            $row.html('<td><input title="Enter Kind Of work " readonly="readonly" onclick="if(this.value!=''){this.value='';opendrop();}else{opendrop();}" id="other_work' + counter + '" name="other_work' + counter + '" type="text" size="30" onclick="opendrop()"  <?php if (isset($errors)) { echo 'value="'.htmlentities(@$_POST['other_work' + counter + '']).'"'; } ?>> </td>
     <td><input name="client_name' + counter + '" type="text" id="client_name' + counter + '" size="40"/></td>
     <td><input name="firm_name' + counter + '" type="text" id="firm_name' + counter + '" size="40"/></td>');
     $('#postq').append($row);
                counter++;
            });
    </script>

和这个按钮但仍无法正常工作

<input type='button' value='Add Button' id='addButton' />

Answer 1

添加一行：

$('#postq>tbody')
    .append($('<tr>')
        .append($('<td>')
            .text('cell 1 text'))
        .append($('<td>')
            .text('cell 2 text')));

删除一行：

$('#postq>tbody>tr').remove();

Answer 2

$('#postq tr:last').remove()会删除最后一行。

$('<tr class="yournewrow" />').insertAfter('#postq tr:last');允许您插入一个新行作为表格中的最后一行。

Answer 3

最后添加行：

$('#postq > tbody:last').append('<tr><td>Added here</td></tr>');

最后删除行：

$('#postq > tbody:last tr:last').remove();

在表中添加和删除行

3 个答案: