在jQuery中添加表行

jQuery中最后一行向表中添加额外行的最佳方法是什么？

这可以接受吗？

$('#myTable').append('my datamore data');

您可以添加到这样的表(例如输入,选择,行数)的限制是什么？

你建议的方法不能保证给你你想要的结果 - 如果你有一个tbody例子:

......

你最终会得到以下结果:

.........

因此我建议采用这种方法:

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

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

更新:在此问题的最近活动之后重新回答此答案.eyelidless是一个很好的评论,tbody在DOM中总会有一个; 这是事实,但只有至少有一行.如果没有行,tbody除非您自己指定了行,否则将没有行.

DaRKoN_ 建议追加到tbody而不是添加在最后一个内容tr.这解决了没有行的问题,但仍然没有防弹,因为理论上你可以有多个tbody元素,并且行将被添加到每个元素中.

权衡一切,我不确定是否有单一的单线解决方案可以解决每一种可能的情况.您需要确保jQuery代码与您的标记一致.

我认为最安全的解决方案可能是确保您的标记table中至少包含一个tbody,即使它没有行.在此基础上,您可以使用以下工作,但是您可以使用多行(并且还可以考虑多个tbody元素):

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

jQuery有一个内置的工具来动态操作DOM元素.

您可以像这样向表中添加任何内容:

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

$('')jQuery中的东西是一个标记对象,它可以有几个attr可以设置和获取的属性,以及text代表这里标记之间的文本:text.

这是一些非常奇怪的缩进,但是你更容易看到这个例子中发生了什么.

所以自从@Luke Bennett回答这个问题后,事情发生了变化.这是一个更新.

jQuery的自1.4版本(？)会自动检测,如果你试图要插入的元素(使用任意的append(),prepend(),before(),或after()方法)是一个,并将其插入第一个在你的表或它包装成一个新的,如果一个不存在.

所以是的,您的示例代码是可以接受的,并且可以与jQuery 1.4+一起使用.;)

$('#myTable').append('my datamore data');

如果你有一个和一个怎么办？

如:

    

        
Foo
    
    

        
footer information
    

然后它会在页脚中插入新行 - 而不是身体.

因此,最好的解决方案是包含标签和使用.append,而不是.after.

$("#myTable > tbody").append("row content");

我知道你已经要求使用jQuery方法了.我看了很多,发现我们可以通过以下函数直接使用JavaScript来更好地完成它.

tableObject.insertRow(index)

index是一个整数,指定要插入的行的位置(从0开始).也可以使用-1的值; 这导致新行将插入最后一个位置.

此参数在Firefox和Opera中是必需的,但在Internet Explorer,Chrome和Safari中是可选的.

如果省略此参数,则insertRow()在Internet Explorer的最后一个位置以及Chrome和Safari中的第一个位置插入一个新行.

它适用于HTML表的每个可接受的结构.

以下示例将在last中插入一行(-1用作索引):

我希望它有所帮助.

我建议

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

而不是

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

在first和last第一个或最后一个标记关键字工作启动,没有关闭.因此,如果您不希望更改嵌套表,而是添加到整个表中,则嵌套表会更好.至少,这是我发现的.

在我看来,最快捷,最明确的方式是

//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('hello>');

这里是演示 小提琴

此外,我可以推荐一个小函数来进行更多的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 = ''+
    '{{id}}'+
    '{{name}}'+
    '{{phone}}'+
'';


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

这是演示 小提琴

这可以使用jQuery的"last()"函数轻松完成.

$("#tableId").last().append("New row");

当表中没有任何行时,我正在使用这种方式,并且每行都非常复杂.

style.css中:

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

xxx.html

...
 ... 
...

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

...

对于此处发布的最佳解决方案,如果最后一行有嵌套表,则新行将添加到嵌套表而不是主表.一个快速的解决方案(考虑带有/不带tbody的表和带有嵌套表的表):

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

用法示例:

add_new_row('#myTable','my new row');

我这样解决了.

使用jquery

$('#tab').append($('')
    .append($('').append("text1"))
    .append($('').append("text2"))
    .append($('').append("text3"))
    .append($('').append("text4"))
  )

片段

$('#tab').append($('')
  .append($('').append("text1"))
  .append($('').append("text2"))
  .append($('').append("text3"))
  .append($('').append("text4"))
)

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

$('#yourTableId').append('your data1your data2your data3');