-1

私は次のようなHTML構造を持っています:

<button type="button">Add Column Record</button>
<table border="1">
<tr>
    <th> Header 1</th>

    <td> L1</td>
    <td> L1</td>

</tr>
<tr>
<th> Header 2</th>

    <td> L2 </td>
    <td> L2 </td>

</tr>
<tr>
    <th> Header 3</th>

    <td> L3</td>
    <td> L3</td>

</tr>

ボタンを押した後、一番右の列に縦のレコードを追加したい。jQueryを使用してこの効果を実装するにはどうすればよいですか?

4

4 に答える 4

2

次のようなことを試すことができます：

$('button').on('click', function() {
    var table = $('table');
    var newCell = null;

    table.find('tr').each(function(index) {
        newCell = $('<td/>');
        newCell.text('L' + (index+1));
        $(this).append(newCell);
    });
});

デモはこちら: http://jsfiddle.net/8RmS8/

于 2013-02-08T05:08:52.477 に答える
1

これをチェックしてください：http://jsfiddle.net/MMXnY/1/

$('button').click(function(){
   $('table tr').each(function(i, v){
     $(this).append($('td:last',this).clone().text('L'+parseInt(i+1)));
   });
});

trその後、それぞれを繰り返すことができますmake a clone of the last td and then put text and increase the number by parsing it then append it after last td.

于 2013-02-08T05:09:25.053 に答える
0

http://api.jquery.com/append/

http://api.jquery.com/appendTo/

http://api.jquery.com/prepend/

各関数は、わずかに異なる追加を行います。それらを読んで、使用したいものを見つけてください。

例：

前

<div class="area"></div>

脚本

$('<p>Test</p>').appendTo('.area');

後

<div class="area"><p>Test</p></div>

お役に立てれば！

于 2013-02-08T05:03:13.633 に答える
0

tr1 つの列を追加する場合は、各テーブルで反復処理を行い、新しい列を追加できますtd

例：

$("#id_of_your_table > tbody > tr").each(function(index, trElement) {

    // Add a new TD at the end
    $(trElement).append($(document.createElement("td")));

});

注: 適切な動作のために を追加することを忘れないtbodyでくださいtable(ブラウザによっては、存在しない場合にデフォルトで追加されます) 。

例：

<table id="myTable">
    <tbody>
        <tr>
            .....

完全な例を次に示します。

<button id="addColumn">Add new column</button>
<table id="myTable">
    <tbody>
        <tr>
            <td>col 1</td>
            <td>col 2</td>
            <td>col 3</td>
        </tr>
        <tr>
            <td> col 1</td>
            <td> col 2</td>
            <td> col 3</td>
        </tr>
    </tbody>
</table>

<script>

    // When DOM is ready
    $(document).ready(function() {

        // Listen on the click on the button
        $("#addColumn").on('click', function(mouseEvent) {

            // Iterate on all TR of the table
            $("#id_of_your_table > tbody > tr").each(function(index, trElement) {

                // Add a new TD at the end
                $(trElement).append($(document.createElement("td")));

            });
        });

    });

</script>
于 2013-02-08T05:07:01.637 に答える