javascript - 如何使用 Javascript 在表中查找空 tr

Question

我想在表中找到 Empty tr，有什么方法可以找到吗？找到空行后，我想在其中插入一些数据。

Answer 1

假设你有这个 HTML：

  <table id=tbl>
    <tr><td>A</td><td>B</td></tr>
    <tr><td>A</td><td>B</td></tr>
    <tr><td></td><td></td></tr> <!-- this line is empty -->
    <tr><td>A</td><td>B</td></tr>
  </table>

然后你可以像这样填充空行：

var rows = document.getElementById('tbl').rows;
for (var i=0; i<rows.length; i++) {
   var txt = rows[i].textContent || rows[i].innerText;
   if (txt.trim()==="") rows[i].innerHTML="<td>Something</td>";
}

示范

这使用：

• 表格的行属性
• textContent（或innerText对于 IE）获取没有标签的内容

由于这也使用了trimIE8 中不可用的功能，您可能需要添加此 shim：

if(!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g,'');
  };
}

Answer 2

可能有更好的方法，这就是我想到的。

$('tr').each(function() {
  if($(this).find('td').length == 0) {
   // empty tr
   // id of tr is available through this.id
  }
});

Answer 3

也许是这样的$('table tr:empty').html('....')

Answer 4

var tables = document.getElementsByTagName('table');
var table = tables[0];
var trs = table.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    if (trs[i].innerHTML === '') {
        console.log('EMPTY', trs[i]);
    } else {
        console.log('NOT EMPTY', trs[i]);
    }
}

Answer 5

我认为这并不容易。你可以看到这个链接。
HTML：

<table id="table" style="border: 1px solid green;"><tbody>
    <tr id="empty"></tr>
    <tr id="withText"><font style="color: red;">text</font></tr>
    <tr id="withEmptyTd"><td></td></tr>
    <tr id="withTdWithText"><td>text</td></tr>
</tbody></table>
<div id="output"></div>  

Javascript：

var output = document.getElementById('output');
var table = document.getElementById('table');
var trs = table.querySelectorAll('tr');
var tr, id, text, tds, j, td, tdText;
for (var i = 0; i < trs.length; i++) {
    tr = trs[i];
    id = tr.id;
    output.innerHTML += "Getting tr[" + id + "]<br />";
    text = tr.innerHTML;
    output.innerHTML += "tr[" + id + "].innerHTML = \"" + text + "\" it's length = " + text.length + "<br />";
    tds = tr.querySelectorAll('td');
    output.innerHTML += "tr[" + id + "] have " + tds.length + " tds<br />";
    for (j = 0; j < tds.length; j++) {
        td = tds[j];
        tdText = td.innerHTML;
        output.innerHTML += "tr[" + id + "] -> td[" + j + "].innerHTML = \"" + tdText + "\" its length = " + tdText.length + "<br />";
    }
}  

输出将是：

Getting tr[empty]
tr[empty].innerHTML = "" it's length = 0
tr[empty] have 0 tds
Getting tr[withText]
tr[withText].innerHTML = "" it's length = 0
tr[withText] have 0 tds
Getting tr[withEmptyTd]
tr[withEmptyTd].innerHTML = "" it's length = 9
tr[withEmptyTd] have 1 tds
tr[withEmptyTd] -> td[0].innerHTML = "" its length = 0
Getting tr[withTdWithText]
tr[withTdWithText].innerHTML = "text" it's length = 13
tr[withTdWithText] have 1 tds
tr[withTdWithText] -> td[0].innerHTML = "text" its length = 4  

导致tr 中但 td 中没有的任何标记或文本显示在表格之前。