0

追加ボタンのあるテーブルと追加ボタンのないテーブルの 2 つのテーブルがあります。追加ボタンを使用して行に入力したデータを他のテーブルに表示するにはどうすればよいですか? たとえば、1、2、3 などを入力して [追加] をクリックすると、テーブルは 5、4、6 を持つ行 1 に更新されます。行 2 は 1,2,3 です。3 行目を追加すると、2 行目の下に移動します。

これが私がこれまでに持っているものの例です：

http://jsfiddle.net/r8yXp/4/

追加ボタンをクリックしたときに、入力フィールドから上のテーブルにデータを取得する方法がわかりません。

4

1 に答える 1

1

少し単純化された答えですが、これをあなたがやろうとしていることの基礎として使うことができます:

Name:​<input type="text" id="name">
<input type="button" id="add" value="add"/>
<br/>
<table border="1">
    <tr>
    </th>Name</th>
    </tr>
    <tbody id="root"></tbody>
</table>
<script>
    $('#add').click(function(){
    var name = $('#name').val(); //get value from text field
    var root = $('#root'); //this is where you will attached the new row
    var tr = $("<tr>"); //the new row
    var td = $("<td>").text(name); //use text from textfield as the text for the new table row
    td.appendTo(tr);
    tr.appendTo(root);
    });
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

フィドルへのリンクは次のとおりです。http://jsfiddle.net/jrPxr/

入力を生成するには:

var input = $("<input>").attr({"type" : "text", "id" : "someID"}).val(name);

次に、それを直接の親に追加します。この場合、テーブル定義:

input.appendTo(td);

タイプを任意の入力 (ラジオ、チェックボックスなど) に変更するだけです。

于 2012-10-13T03:57:25.140 に答える