我使用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);

其他回答

使用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>

您可以使用这个很棒的jQuery添加表行函数。它适用于有<tbody>但没有的表。它还考虑了最后一行表格的列跨度。

下面是一个示例用法:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

使用javascript函数编写

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

将向表的第一个TBODY添加新行,而不依赖于存在的任何THEAD或TFOOT。(我没有从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>

在该示例中,b行插入在1 2之后,而不是第二示例中的3 4之后。如果表为空,jQuery将为新行创建TBODY。

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