将以前的行数据添加到动态生成的行

时间:2013-06-21 11:59:12

标签: javascript jquery html

我有一张桌子。在选择变量的onchange上,它会生成行。 我想要做的是,我在第一行写的数据应该在生成的行中复制。 这是我的表和java脚本。

<form>
    <table border = "1" id = "engagements">
        <tr>
            <th><input type="checkbox" onclick="checkAll(this)"></th>
            <th>Organization</th>
            <th>Project</th>
            <th>Product</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td><input type="checkbox" onclick="checkAll(this)"></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <!--
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            -->
        </tr>
    </table>

    <select name = "mode" id = "mode" onchange="addrow('engagements')">
        <option value="">Add More Rows with Same Data as Above</option>
        <option value="1">1 More</option>
        <option value="2">2 More</option>
        <option value="3">3 More</option>
        <option value="4">4 More</option>
        <option value="5">5 More</option>
     </select>

</form>


<script language="javascript">
    function addrow(tableID)
    {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        var e = document.getElementById("mode");
        var strUser = e.options[e.selectedIndex].value;

        for (var j = 0; j < strUser; j++)
        {
            for (var i = 0; i < colCount; i++)
            {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            }
            var row = table.insertRow(rowCount);
        }
    }
</script>

4 个答案:

答案 0 :(得分:2)

如果你已经在使用jQuery,你可以这样做 -

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
});

演示----> http://jsfiddle.net/jW6eL/

答案 1 :(得分:0)

用这个函数替换你的函数(jQuery解决方案):

function addrow(tableID)
{
    var table=$('#'+tableID);
    var val1=$('#mode').val();

    for(i = 0; i < parseInt(val1); i++)
    {
        table.find('tr:last').after('<tr>'+table.find('tr:last').html()+'</tr>');
    }
}

答案 2 :(得分:0)

试试这个

function addrow(tableID)
{
  var $table = $('#' + tableID);
  var noOfRows = parseInt($('#mode').val());
  var $clonedRow = $table.find('tr:last');
  for(var i = 0; i < 5; i++) {
    $clonedRow.clone().appendTo($table);
  }
}

答案 3 :(得分:0)

$('#step_table').append($('#step_table tr:last td:last').html());