0

チェックボックスに基づいて行を動的に追加しようとしています。ここでの考え方は、選択した行を複製することです。たとえば、最初は 1 行しかありません。この行に対応するチェックボックスをオンにすると、その複製が作成されます。新しく追加された行のドロップダウン値を変更して複製すると、ハードコーディングされているため、それを行うことができません。どうすればこのダイナミティを実現できるでしょうか?

<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 に答える