如何检查表是否为空或不使用 javascript答案

【问题标题】：How to check a table is empty or not using javascript如何检查表是否为空或不使用 javascript
【发布时间】：2019-04-03 02:39:33
【问题描述】：

所以我有一个这样的脚本来通过 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() 进行检查，但它不起作用。

【问题讨论】：

包含“任何东西”是什么意思？子元素，文本？

标签： javascript html html-table is-empty

【解决方案1】：

有多种方法。其中一种方法是，您可以使用 childElementCount 属性。

if (tbl.childElementCount==0)
{

}

更多详情可以参考link

【讨论】：

【解决方案2】：

可以查看表格的行数：

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
}

【讨论】：

【解决方案3】：

在这种情况下，由于您的表中没有子元素或文本节点，您只需检查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>

【讨论】：

【解决方案4】：

如果你想检查是否有任何内部表这样做

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

更多信息here

【讨论】：

【解决方案5】：

你可以检查行数

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

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

【讨论】：

【解决方案6】：

纯javascript：

!![].length

或使用 Lodash

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

【讨论】：