jquery - 将列添加到表中，其中包含 jquery 中前一列的值

Question

我是 jquery 新手，发现这个网站比其他网站更有帮助。我在向表中添加列时遇到问题。添加的列应包含前一列的值。这是 JSFiddle http://jsfiddle.net/3sEGf/27/ 中的代码.

HTML:

 <table border="1" class="table">
<thead>
<tr>
        <th>Repository</th>
        <th> File 1</th>

        <th><button  class="addColumn">Add Column</button></th></tr>
</thead>
 <tbody>
        <tr>
        <td>Publish date</td><td>2/14/2013</td>
        </tr>
        <tr>
        <td>Project</td><td id="two"><select id="select1">
<option value="">Pick one</option>
<option value="1">False</option>
<option value="2">True</option>
</select></td>
         </tr>
         <tr>
        <td>Title</td><td>Some info</td>
         </tr>  
</tbody>         
</table>

Jquery:

$(document).ready(function(){
$("table.table button.addColumn").click(function () {
    var $this = $(this), $table = $this.closest('table')
    var columnName = window.prompt("Enter Column name", "");

    $('<th>' + columnName +'</th>').insertBefore($table.find('tr').first().find('th:last'))

     var contentvalue = $(this).find("td:first").html();    

     $('<td>' + contentvalue + '</td>').insertAfter($table.find('tr:gt(0)').find('td:last'))

}); });

Answer 1

这应该可以达到你想要的效果

$(document).ready(function () {
    var $table=$("table.table")


    $("table.table button.addColumn").click(function () {
        var $this = $(this),
            $table = $this.closest('table'),
            $rows = $table.find('tbody tr')
            var columnName = window.prompt("Enter Column name", "");

        $('<th>' + columnName + '</th>').insertBefore($table.find('tr').first().find('th:last'))

        $rows.each(function () {
            var $last = $(this).find('td:last');

            $(this).append($last.clone())
        })


    });
});

DEMO