0

jQueryを使用してJSで動的htmlテーブルを作成するには? たとえば、6 つのボタンが必要です。

  • 行を追加してテーブルを開始します。
  • 行を中央に追加します。
  • 行を最後に追加します。
  • 最初の行を削除します。
  • 中央の行を削除します。
  • 最後の行を削除します。

更新:

それが私のJSです：

$(document).ready(function(){
        $('#addFirstPosition').click(function(){
            var $tr = $('<tr><td>3</td><td>3</td></tr>');
            //var $myTable = $('#myTable');
            //$myTable.append($tr);
            $("#myTable > tbody").append($tr);
        );
        });

そして、これは私のhtmlです：

<input id="addFirstPosition" type="button" value="AddFirst" />
<input id="addMiddlePosition" type="button" value="AddMiddle" />
<input id="addLastPosition" type="button" value="AddLast" />
<br />
<input id="deleteFirstPosition" type="button" value="DelFirst" />
<input id="deleteMiddlePosition" type="button" value="DelMiddle" />
<input id="deleteLastPosition" type="button" value="DelLast" />
<br />
<br />
<table id="myTable" border="1px">
    <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                1
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
            <td>
                2
            </td>
        </tr>
    </tbody>
</table>

ボタンをクリックしても何も起こりません。

4

2 に答える 2

6

$（tr）を実行して、uがこのquesに行を検索するように要求した形式で進みます。次に使用します

.append(); for adding to the last
.prepend(); for adding to the first
select an elemnt by doint $(tr).eq(index).after() to add in between

あなたがすることができる行を選択した後

var r = $(tr).eq(index)

削除するには

r.remove()

行がどこにあっても

于 2012-05-18T09:28:37.743 に答える
2

js コードにエラーがありました:

$(document).ready(function() {
    $('#addFirstPosition').click(function() {
        var $tr = $('<tr><td>3</td><td>3</td></tr>');;
        $("#myTable > tbody").append($tr);
    });// I WAS MISSING A } BEFORE );
});​

ブラケットがないか、間違った場所にあります。上記のコードは修正され、間違いについてコメントしました。

ここでデモ

しかし、Parv Sharmaの回答にはいくつかの良い点がありました。

于 2012-05-19T12:52:01.180 に答える