javascript - example - jquery td click




在jQuery中添加表行 (20)

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

這可以接受嗎?

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

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


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>

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


如果要在<tr>第一個子項之前添加row

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

如果要在<tr>最後一個子項後添加row

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

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

首先找出長度或行:

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

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

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

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

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


如果你有另一個變量,你可以在<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);

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


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

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

以下是一個示例用法:

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

我建議

$('#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>

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

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');
    });
      });
});

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


我的解決方案

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

用法:

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

我遇到了一些相關的問題,嘗試在單擊的行之後插入一個表行。 一切都很好,除了.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);

所以自從@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>');

要在主題上添加一個很好的示例,如果您需要在特定位置添加行,這裡是可行的解決方案。

額外的行在第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>

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

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

這是我的解決方案

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</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