在jQuery中添加表行

我使用jQuery向表中添加一行作为最后一行。

我是这样做的：

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

2013-08-29 11:35:58

其他回答

如果您有另一个变量，您可以在＜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);

2016-10-14 05:18:02

你建议的方法并不一定能给你带来你想要的结果——例如，如果你有一个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，包括上面示例中的多行。

更新：在最近使用此问题进行活动后，重新审视此答案。无眼是一个很好的评论，即DOM中总会有一个tbody；这是正确的，但前提是至少有一行。如果没有行，除非您自己指定了一行，否则不会有tbody。

DaRKoN_建议在tbody之后添加内容，而不是在最后一个tr之后添加内容。这解决了没有行的问题，但仍然不可靠，因为理论上可以有多个tbody元素，行将添加到每个元素中。

权衡一切，我不确定是否有一个单一的单线解决方案能够解决每一种可能的情况。您需要确保jQuery代码与标记相符。

我认为最安全的解决方案可能是确保您的表始终在标记中包含至少一个tbody，即使它没有行。在此基础上，您可以使用以下方法，无论您有多少行（也可以考虑多个tbody元素）都可以使用：

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

2008-10-04 21:49:32

使用jQuery.append（）使用jQuery.appendTo（）使用jQuery.after（）使用Javascript.insertRow（）使用jQuery-添加html行

试试看：

//使用jQuery-append$（'#myTable>tbody'）.append（'<tr><td>3</td><td>Smith-Patel</td></tr>'）；//使用jQuery-appendTo$（'<tr><td>4</td><td>J.Thomson</td></tr>'）.appendTo（“#myTable>tbody”）；//使用jQuery-添加html行让tBodyHtml=$（'#myTable>tbody'）.html（）；tBodyHtml+='<tr><td>5</td><td>Patel S.</td></tr>'；$（'#myTable>tbody'）.html（tBodyHtml）；//使用jQuery-after$（'#myTable>tbody-tr:last'）.之后（'<tr><td>6</td><td>天使布鲁ice</td></tr>'）；//使用JavaScript-insertRowconst tableBody=document.getElementById（'myTable'）.getElementsByTagName（'tbody'）[0]；const newRow=tableBody.insertRow（tableBody.rows.length）；newRow.innerHTML='<tr><td>7</td><td>K。Ashwin</td></tr>'；<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“myTable”><thead><tr><th>Id</th><th>名称</th></tr></thead><tbody><tr><td>1个</td><td>约翰·史密斯</td></tr><tr><td>2个</td><td>汤姆·亚当</td></tr></tbody></table>

2022-04-20 05:12:51

所以，自从@Luke Bennett回答这个问题后，情况就发生了变化。这里有一个更新。

jQuery自1.4版（？）起自动检测您试图插入的元素（使用append（）、prepend（）、before（）或after（）方法中的任何一种）是否是<tr>，并将其插入到表中的第一个<tbody>中，如果不存在，则将其包装到新的<tbody中。

因此，是的，您的示例代码是可以接受的，并且可以与jQuery1.4+一起工作。；）

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

2012-06-05 20:12:48

上面的答案非常有用，但当学生参考此链接从表单中添加数据时，他们通常需要一个示例。

我想提供一个示例，从from获取输入，并使用.after（）使用字符串插值将tr插入到表中。

function add(){
  let studentname = $("input[name='studentname']").val();
  let studentmark = $("input[name='studentmark']").val();

  $('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}

函数add（）{let studentname=$（“input[name='studentname']”）.val（）；let studentmark=$（“input[name='studentmark']”）.val（）；$（'#student-tr:last'）.after（`<tr><td>$｛studentname｝</td><td>${studentmark｝</td></tr>`）；}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><!DOCTYPE html><html><head><style>表{字体系列：arial，sans-serif；边界塌陷：塌陷；宽度：100%；}td，第{边框：1px实心#dddddd；文本对齐：左侧；填充：8px；}tr：第n个孩子（偶数）{背景色：#dddddd；}</style></head><body><表单><input-type='text'name='studentname'/><input-type='text'name='studentmark'/><input-type='button'onclick=“add（）”value=“add new”/></form><table id=“学生”><thead><th>名称</th><th>标记</th></thead></table></body></html>

2019-05-12 05:39:38

在jQuery中添加表行

推荐文章

最新文章

标签