0

我正在尝试根据选中的复选框动态添加行。这里的想法是复制选定的行。例如，最初只有一行。在选中与该行对应的复选框时，它会创建它的副本。如果我更改新添加行中的下拉值并复制它，由于我的硬编码，它无法做到这一点。我怎样才能带来这种动态性？

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#DuplicateRow").click(function() {
                var checkboxValues = [];
                $('input[type="checkbox"]:checked').each(function() {
                    //alert('hi') 
                    var row = document.getElementById("row"); // find row to copy
                    var table = document.getElementById("tabletomodify"); // find table to append to
                    var clone = row.cloneNode(true); // copy children too
                    clone.id = "row"; // change id or other attributes/contents
                    table.appendChild(clone); // add new row to end of table
                });
            });
        });
    </script>
</head>


<table cellpadding="10" style="border:2px solid black;" id="tabletomodify">
    <tr bgcolor="#360584">
        <td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font>

        </td>
    </tr>
    <tr>
        <td>
            <button id="AddRow">Add Row</button>
        </td>
        <td>
            <button id="DuplicateRow">Duplicate Row</button>
        </td>
        <td>
            <button id="DeleteRow">Delete Row</button>
        </td>
    </tr>
    <tr bgcolor="#360584">
        <td><font face="Arial" size="2" color="white">Name </font>

        </td>
        <td><font face="Arial" size="2" color="white">Date of Birth</font>

        </td>
        <td><font face="Arial" size="2" color="white">City</font>

        </td>
        <td><font face="Arial" size="2" color="white">State</font>

        </td>
        <td><font face="Arial" size="2" color="white">Country</font>

        </td>
        <td><font face="Arial" size="2" color="white">Phone Number</font>

        </td>
        <td><font face="Arial" size="2" color="white">Mail ID</font>

        </td>
        <td><font face="Arial" size="2" color="white">Select</font>

        </td>
        <tr id="row">
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <select><option>one</option><option>two</option></select>
            </td>
            <td>
                <input type="checkbox" class="checkbox">
            </td>
        </tr>
</table>
4

1 回答 1

0

这个怎么样..这行得通，您已经手动将所有更改/选择的选项从实际行复制到克隆行

$(document).ready(function(){
$("#DuplicateRow").click(function(){
var checkboxValues = [];
$('input[type="checkbox"]:checked').each(function(){
var $chkbox=$(this);
var $actualrow = $chkbox.closest('tr');
var $clonedRow = $actualrow.clone();
$clonedRow.find("select").each(function(i){
this.selectedIndex = $actualrow.find("select")[i].selectedIndex;
})
$chkbox.closest('#tabletomodify').append( $clonedRow );
});
});
});
于 2013-11-01T08:19:51.153 回答