如何使用JavaScript检查表格是否为空

Question

所以我有一个像这样的脚本，通过javascript来创建一个2x2的表格

function createtable(){
          var tbl = document.getElementById('x');
            if (tbl.contains()==false){
              tbl.setAttribute('border', '1');
              var tbdy = document.createElement('tbody');
              for (var i = 0; i < 2; i++) {
                var tr = document.createElement('tr');
                for (var j = 0; j < 2; j++) {         
                    var td = document.createElement('td');
                    tr.appendChild(td);
                    td.style.height='50px';
                    td.style.width='50px';
                }
                tbdy.appendChild(tr);
              }
              tbl.appendChild(tbdy);
        }

<form>
    <input type="button" value="Create Table" onclick="createtable()"> <br>
</form>
<table id="x"> </table>

我想检查表x是否包含任何内容，以便创建它自己。我尝试使用contains()来检查，但它不起作用。

- Phạm Trí

---

“包含任何内容”是什么意思？子元素、文本？ - skyline3000

Answer 1

您可以检查表中的行数：

```SELECT COUNT(*) FROM table_name;```

var x = document.getElementById("myTable").rows.length;

请参考这里： https://www.w3schools.com/jsref/coll_table_rows.asp 使用以下代码：

var tbl = document.getElementById('x');
if (tbl.rows.length == 0) {
   // empty
}

- DDan

Answer 2

如果你想检查表格中是否有任何 ，请执行以下操作

document.getElementById("myTable").rows.length

更多信息 在这里

- MyTwoCents

Answer 3

你可以检查行数。

var tbl = document.getElementById('x');
if(tbl.rows.length==0){
}

如果 tbl.rows.length 为0，则表示该表格没有任何行。

- Kuganrajh Rajendran

Answer 4

有多种方法。其中一种方法是使用childElementCount属性。

if (tbl.childElementCount==0)
{

}

如需更多详细信息，请参考link

- Jitendra G2

Answer 5

在这种情况下，由于您的表中没有子元素或文本节点，因此您可以检查 innerHTML 属性是否为假。这可以防止您的 createtable 函数在运行一次后附加其他子元素。例如：

function createtable() {
  var tbl = document.getElementById('x');
  if (!tbl.innerHTML) {
    var tbdy = document.createElement('tbody');
    tbl.setAttribute('border', '1');
    for (var i = 0; i < 2; i++) {
      var tr = document.createElement('tr');
      for (var j = 0; j < 2; j++) {
        var td = document.createElement('td');
        tr.appendChild(td);
        td.style.height = '50px';
        td.style.width = '50px';
      }
      
      tbdy.appendChild(tr);
    }
    
    tbl.appendChild(tbdy);
  }
}

<form>
  <input type="button" value="Create Table" onclick="createtable()">
  <br>
</form>
<table id="x"></table>

- benvc

Answer 6

纯JavaScript：

!![].length 

或者使用 Lodash

_.head([]);
// => undefined

- Rafał Wielgus