javascript table - 在jQuery中添加表行





cell value (25)


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

用javascript函數寫

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

jQuery中最後一行向表中添加額外行的最佳方法是什麼?

這可以接受嗎?

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

你可以添加到這樣的表(例如輸入,選擇,行數)的限制是什麼?




如果你有另一個變量,你可以在<td>標籤中訪問,就像嘗試一樣。

這樣我希望它會有所幫助

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);



我猜我已經完成了我的項目,這裡是:

HTML

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

JS

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});



所以自從@Luke Bennett回答這個問題後,事情發生了變化。 這是一個更新。

jQuery自版本1.4(?)自動檢測您嘗試插入的元素(使用append()prepend()before()after()方法中的任何一個)是<tr>並將其插入到表中的第一個<tbody>或者如果不存在則將其包裝到新的<tbody>

所以是的,您的示例代碼是可以接受的,並且可以與jQuery 1.4+一起使用。 ;)

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



這是我的解決方案

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



我的解決方案

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

用法:

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



這可以使用jQuery的“last()”函數輕鬆完成。

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



當表中沒有任何行時,我正在使用這種方式,並且每行都非常複雜。

style.css中:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...



我用這種方式解決了它,我認為是最可讀的:)

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



您建議的方法無法保證為您提供您正在尋找的結果 - 例如,如果您有一個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>');

您可以在after()方法中包含任何內容,只要它是有效的HTML,包括上面示例中的多行。

更新:在此問題的最近活動之後重新審視此答案。 eyelidless是一個很好的評論,在DOM中總會有一個tbody ; 這是事實,但前提是至少有一行。 如果你沒有行,除非你自己指定了行,否則就沒有行。

DaRKoN_ suggests附加到tbody而不是在最後一個tr之後添加內容。 這解決了沒有行的問題,但仍然沒有防彈,因為理論上你可以有多個tbody元素,並且行將被添加到每個行。

權衡一切,我不確定是否有單一的單線解決方案可以解決每一種可能的情況。 您需要確保jQuery代碼與您的標記一致。

我認為最安全的解決方案可能是確保您的table在標記table始終包含至少一個tbody ,即使它沒有行。 在此基礎上,您可以使用以下哪些行(但也可以考慮多個tbody元素):

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



在我看來,最快捷,最明確的方式是

//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




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

您可以緩存頁腳變量並減少對DOM的訪問(注意:使用假行而不是頁腳可能會更好)。

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



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

將向表的第一個 TBODY添加一個新行,而不依賴於任何THEADTFOOT 。 (我沒有找到來自哪個版本的jQuery .append()這種行為是存在的。)

您可以在以下示例中嘗試:

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

在哪個示例中, ab行在1 2之後插入,而不是在第二個示例中的3 4之後插入。 如果表是空的,jQuery會為新行創建TBODY




我知道你已經要求了一個jQuery方法。 我看了很多,發現我們可以通過以下函數直接使用JavaScript來更好地完成它。

tableObject.insertRow(index)

index是一個整數,指定要插入的行的位置(從0開始)。 也可以使用-1的值; 這導致新行將插入最後一個位置。

此參數在Firefox和Opera是必需的,但在Internet Explorer, ChromeSafari是可選的。

如果省略此參數, insertRow()在Internet Explorer的最後一個位置以及Chrome和Safari中的第一個位置插入一個新行。

它適用於HTML表的每個可接受的結構。

以下示例將在last中插入一行(-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>

我希望它有所幫助。




<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');



因為我也有一個方法在最後或任何特定的地方添加行所以我想我也應該分享這個:

首先找出長度或行:

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

然後使用下面的代碼添加你的行:

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



    // 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);



如果您正在使用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);

請參閱Datatables fnAddData Datatables API




我發現這個AddRow插件對於管理表行非常有用。 但是,如果您只需要添加新行,Luke的solution將是最佳選擇。




jQuery有一個內置的工具來動態操作DOM元素。

您可以像這樣向表中添加任何內容:

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

jQuery中的$('<some-tag>')是一個標籤對象,它可以有幾個可以設置和獲取的attr屬性,以及text ,它代表標籤之間的文本: <tag>text</tag>

這是一些非常奇怪的縮進,但是你更容易看到這個例子中發生了什麼。




如果你有<tbody><tfoot>怎麼辦?

如:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

然後它會在頁腳中插入新行 - 而不是身體。

因此,最好的解決方案是包含<tbody>標籤並使用.append ,而不是.after

$("#myTable > tbody").append("<tr><td>row content</td></tr>");



我遇到了一些相關的問題,嘗試在單擊的行之後插入一個表行。 一切都很好,除了.after()調用不適用於最後一行。

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

我找到了一個非常不整潔的解決方案:

按如下方式創建表(每行的id):

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

等......

然後 :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);



您可以使用這個偉大的jQuery添加表行功能。 它適用於具有<tbody>但沒有的表。 此外,它還考慮了您上一個表行的colspan。

以下是一個示例用法:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));



尼爾的答案是迄今為止最好的答案 。 然而事情變得非常混亂。 我的建議是使用變量來存儲元素並將它們附加到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);



AngularJS和jQuery:

除了JQLite功能之外,AngularJs和JQuery在每個級別都完全不同,一旦你開始學習AngularJs的核心功能,你就會看到它(我在下面解釋過)。

AngularJs是一個客戶端框架,用於構建獨立的客戶端應用程序。JQuery是一個圍繞DOM的客戶端庫。

AngularJs Cool Principle - 如果您希望在UI上進行一些更改,請從模型數據更改角度進行思考。更改您的數據和UI將重新呈現自己。你不需要每次都玩DOM,除非並且直到它幾乎不需要,並且也應該通過Angular Directives來處理。

要回答這個問題,我想與AngularJS分享我在第一個企業應用程序上的經驗。這些是Angular提供的最強大的功能,我們開始改變我們的jQuery思維模式,我們將Angular看作框架而不是庫。

雙向數據綁定是驚人的:我有一個網格,所有功能都是UPDATE,DELTE,INSERT。我有一個數據對象,使用ng-repeat綁定網格模型。您只需編寫一行簡單的JavaScript代碼即可進行刪除和插入,就是這樣。當網格模型立即更改時,網格會自動更新。更新功能是實時的,沒有代碼。你覺得很棒!

可重複使用的指令是超級的:在一個地方寫指令並在整個應用程序中使用它。我的天啊!!! 我使用這些指令進行分頁,正則表達式,驗證等等。真的很酷!

路由很強:由您的實現決定如何使用它,但它需要很少的代碼行來路由請求以指定HTML和控制器(JavaScript)

控制器很棒:控制器會處理自己的HTML,但這種分離對於常見功能也很有效。如果要在主HTML上單擊按鈕調用相同的函數,只需在每個控制器中寫入相同的函數名稱並編寫單獨的代碼。

插件:還有許多其他類似功能,例如在您的應用中顯示疊加層。您不需要為它編寫代碼,只需使用可用作wc-overlay的覆蓋插件,這將自動處理所有XMLHttpRequest(XHR)請求。

RESTful架構的理想選擇:作為一個完整的框架,AngularJS非常適合使用RESTful架構。調用REST CRUD API非常簡單

服務:使用服務編寫公共代碼,在控制器中編寫較少代碼。服務可用於共享控制器之間的共同功能。

可擴展性:Angular使用angular指令擴展了HTML指令。在html中編寫表達式並在運行時評估它們。創建自己的指令和服務,並在不需要額外努力的情況下在另一個項目中使用它們。





javascript jquery html-table