javascript - remove - tbody first




jQueryでテーブル行を追加する (20)

最後の行としてテーブルに追加の行を追加するjQueryの最良の方法は何ですか?

これは受け入れられますか?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

このようなテーブルに追加できるもの(入力、選択、行数など)には制限がありますか?


Datatable JQueryプラグインを使用している場合は、試すことができます。

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

参照データ型fnAddData Datatables API


jQueryには、その場でDOM要素を操作する組み込みの機能があります。

次のようにテーブルに何かを追加することができます:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQueryの$('<some-tag>')は、タグとタグの間のテキストを表すtextだけでなく、設定および取得できるattr属性をいくつか持つことができるタグオブジェクトです。 <tag>text</tag>

これはかなり奇妙なインデントですが、この例では何が起こっているのかを簡単に確認できます。


@ルーク・ベネットがこの質問に答えて以来、事は変わってきました。 ここに更新があります。

バージョン1.4(?)以降のjQueryは、 append()prepend()before() 、またはafter()メソッドのいずれかを使用して挿入しようとしている要素が<tr>であるかどうかを自動的に検出し、最初に<tbody>をテーブルに入れるか、新しい<tbody>が存在しない場合はそれを新しい<tbody>ラップします。

だから、あなたのサンプルコードは受け入れられ、jQuery 1.4+で正常に動作します。 ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

あなたが提案するアプローチは、あなたが探している結果を保証するものではありません。例えば、あなたがtbodyを持っていたら?

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

あなたは次のようになるでしょう:

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

したがって私は代わりにこのアプローチをお勧めします:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

上記の例のように複数の行を含む、有効なHTMLであれば、 after()メソッド内に何かを含めることができます。

更新:この質問の最近の活動に続いて、この回答を再訪します。 まぶたは、DOMにはいつも欲求があるという良いコメントを出します。 これは本当ですが、少なくとも1つの行がある場合のみです。 行がない場合は、自分で指定しない限りtbodyはありません。

DaRKoN_ suggests 、最後のtr後にコンテンツを追加するのではなく、tbodyに追加することをsuggestsます。 これは、行を持たないという問題を回避しますが、理論的には複数のtbody要素を持つことができ、それぞれの行に行が追加されるため、防弾ではありません。

すべてを秤量すると、すべての可能なシナリオを考慮した単一の1行のソリューションがあるとは思いません。 jQueryコードをマークアップで確認する必要があります。

私は最も安全な解決策はおそらくあなたのマークアップにtable常に少なくとも1つのtbody含んでいることを保証することだと思います。 これに基づいて、あなたはあなたが持っている多くの行(そして複数のtbody要素も考慮に入れています)でも動作する次のものを使用することができます:

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

ここに掲載されている最良のソリューションは、最後の行にネストしたテーブルがある場合、メインテーブルの代わりにネストしたテーブルに新しい行が追加されます。 簡単な解決策(tbodyのあるテーブルと入れ子になっていないテーブルとネストしたテーブルのあるテーブルを考慮)

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

使用例:

add_new_row('#myTable','<tr><td>my new row</td></tr>');

このAddRowプラグインがテーブル行を管理するのに非常に便利だとわかりました。 ただし、新しい行を追加するだけでよい場合は、ルークのsolutionが最適です。


これは、jQueryの "last()"関数を使って簡単に行うことができます。

$("#tableId").last().append("<tr><td>New row</td></tr>");

これは私の解決策です

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

トピックに適切な例を追加するには、特定の位置に行を追加する必要がある場合は、ここでは解決策です。

余分な行は、5行後に追加されます。5行未満の場合は、表の最後に追加されます。

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

私はテーブルの下の準備ができた(隠された)コンテナにコンテンツを入れます。あなたが(またはデザイナー)JSを編集する必要はありません。

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

ニールの答えははるかに良いです。 しかし、物事は本当に面倒です。 私の提案は、変数を使用して要素を格納し、それらをDOM階層に追加することです。

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

私の意見では、最も速く明確な方法は

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

ここではFiddleデモです

また、私はより多くのHTML変更を行うための小さな関数をお勧めすることができます

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

私の文字列コンポーザーを使用している場合は、このようにすることができます

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

ここにFiddleデモがあります


私の解決策:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

使用法:

$('#Table').addNewRow(id1);

私はあなたがjQueryメソッドを求めていることを知っています。 私は多く見て、次の関数で直接JavaScriptを使うよりも良い方法でそれを行うことができることを発見しました。

tableObject.insertRow(index)

indexは、挿入する行の位置を指定する整数です(0から始まります)。 -1の値も使用できます。 その結果、新しい行が最後の位置に挿入されます。

このパラメータはFirefoxとOperaでは必須ですが、Internet Explorer、 ChromeSafariではオプションです。

このパラメータを省略すると、 insertRow()はInternet Explorerの最後の位置に、ChromeとSafariの最初の位置に新しい行を挿入します。

それはHTMLテーブルのすべての許容可能な構造のために働くでしょう。

次の例では最後に行を挿入します(-1はインデックスとして使用されます)。

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

私はそれが助けて欲しい


私はお勧め

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

とは対照的に

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

firstlastキーワードは、開始される最初または最後のタグで動作し、閉じられません。 したがって、ネストした表を変更するのではなく、代わりに表全体に追加する場合は、ネストした表でより効果的です。 少なくとも、これは私が見つけたものです。

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

私はそれが最も可読であると思うこの方法で解決した:)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )

私はまた、私はまたこれを共有する必要があると思うので、私はまた、最後や特定の場所で行を追加する方法もあります:

最初に長さまたは行を見つけます:

var r=$("#content_table").length;

下のコードを使用して行を追加します。

$("#table_id").eq(r-1).after(row_html);

簡単な方法で:

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

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

JavaScript関数で書く

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

フッター変数をキャッシュしてDOMへのアクセスを減らすことができます(注:フッターの代わりに偽の行を使用する方が良いかもしれません)。

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")




html-table