6

複数の行を含むテーブルを作成しようとしています。それぞれの行のコピーを作成する最後のセルにボタンがあります。

他のすべてのセルには、入力 (テキスト) が含まれています。追加される入力の内容 (値) は、上記のもの (コピーされたもの) と同じでなければなりません。

ただし、コピーはコピーできません。

入力には次のような一意の名前が必要です:
1-1-name
1-1-age
1-1-country
1-1-email

この行がコピーされた場合、コピーされた入力には次のような名前が必要です
1-2-name
1-2-age
1-2-country
1-2-email

次のものは 2 ではなく 3 などです。

これの問題は、JQuery なしでこれを行わなければならないことだと思います。Javascriptしか使えません。これは可能ですか？

4

2 に答える 2

4

このフィドルを見てください。テーブル行を複製し、ID をインクリメントする純粋な js (jQuery なし) の方法を次に示します。

var idInit;
var table = document.getElementById('theTable');
    table.addEventListener('click', duplicateRow);  // Make the table listen to "Click" events

function duplicateRow(e){
    if(e.target.type == "button"){ // "If a button was clicked"
        var row = e.target.parentElement.parentElement; // Get the row
        var newRow = row.cloneNode(true); // Clone the row

        incrementId(newRow); // Increment the row's ID
        var cells = newRow.cells;
        for(var i = 0; i < cells.length; i++){
            incrementId(cells[i]); // Increment the cells' IDs
        }
        insertAfter(row, newRow); // Insert the row at the right position
        idInit++;
    }
}

function incrementId(elem){
    idParts = elem.id.split('-'); // Cut up the element's ID to get the second part.
    idInit ? idParts[1] = idInit + 1 : idInit = idParts[1]++;  // Increment the ID, and set a temp variable to keep track of the id's.
    elem.id = idParts.join('-'); // Set the new id to the element.
}

function insertAfter(after, newNode){
    after.parentNode.insertBefore(newNode, after.nextSibling);
}​

<table id="theTable">
    <tr id="1-1">
        <td id="1-1-name"><input type="text"/></td>
        <td id="1-1-age"><input type="text"/></td>
        <td id="1-1-country"><input type="text"/></td>
        <td id="1-1-email"><input type="text"/></td>
        <td id="1-1-button"><input type="button" value="Copy"/></td>
    </tr>
</table>​

編集：クリックした行の後に新しい行を挿入するように更新されました。今ボタンと入力で ！

于 2012-12-07T14:17:31.260 に答える
0

はい、これは可能です。新しいテーブル row を作成し、その innerHTML を上の行の innerHTML に設定する必要があります。

jQuery は JavaScript ライブラリです。つまり、JavaScript 関数で構築されています。

したがって、jQuery でできることはすべてJavaScript でもできます。

レオン

于 2012-12-07T13:48:16.783 に答える