javascript - How to find empty tr in table using Javascript

Question

I want to find Empty tr in table, is there any way to find it? after finding empty row I want to insert some data in it.

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（またはinnerTextIEの場合）タグなしでコンテンツを取得する

これも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  

テーブルの前に、td ショーではなく tr 内のタグまたはテキストが表示されます。