使用jquery中前一列的值向表中添加列

时间:2013-12-25 03:51:24

标签: jquery html-table

我是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'))

}); });

1 个答案:

答案 0 :(得分:0)

这应该做你想要的事情

$(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