1

有一个带有链接的表,单击时会添加一个新行:

    <table>
                <thead>
                  <tr>
                    <th scope="col">col1</th>
                    <th scope="col">col2</th>
                    <th scope="col">col3</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td><input name="col1" id="col1"></td>
                    <td><input name="col2" id="col2"></td>
                    <td>
                      <select name="col3" id="col3">
                        <option value="">Please select</option>
                        <option value="1">select1</option>
                        <option value="2">select1</option>
                        <option value="3">select1</option>
                      </select>
                    </td>
                  </tr>
                </tbody>
            </table>
<a href="#" id="addLink">+</a>

单击链接时,我想在表格末尾添加一个新行,但没有第三列。所以我使用 JQuery 来做到这一点:

$(document).ready(function(){
                $('#addLink').click(function(){
                    addTableRow($("table"));
                    return false;
                }); // end click
            function addTableRow(table)
            {
                // get the first row in the table
                var $tr = $(table).find("tbody tr:first").html();

                $($tr).remove('td:last'); // remove the last column 


                $('tbody').append("<tr>");
                $(table).find('tbody tr:last').append($tr);


                        };
            }); // end ready

但是,这部分不会删除第 3 列:

$($tr).remove('td:last'); // remove the last column

有什么方法可以只用前 2 列追加新行吗?

提前致谢 :)

4

3 回答 3

1

无需使用html方法:

$(table).find("tbody tr:first td:last").remove();
于 2012-09-13T16:31:52.160 回答
1

这是你要找的吗?

我也改变了一些其他的东西,你会明白的。

$(document).ready(function(){
  $('#addLink').click(function(){
    addTableRow($("table"));
    return false;
  }); // end click
  function addTableRow(table) {
    // get the first row in the table
    var $tr = table.find("tbody tr:first").html();


    $('tbody').append($('<tr/>'));
    table.find('tbody tr:last').append($tr).find('td:last').remove();


  };
}); // end ready​

http://jsfiddle.net/QTuzM/

于 2012-09-13T16:38:13.017 回答
-1
    $('tbody').append("<tr>");
                $(table).find('tbody tr:last').append($tr);
???

怎么样

$(table).find('tbody').append($tr)
于 2012-09-13T16:28:32.183 回答