为什么我无法使用 JavaScript 访问表格主体元素？

问题描述 投票：0回答：3

我有一个简单的表格，该表格包含 thead、tbody 和 tfoot 部分。在 JavaScript 中，我希望能够访问这些部分中的每一个来设置一些属性。

我尝试分别获取带有 

table.tHead
、
table.tBody
和 
table.tFoot
的零件。

这适用于 tHead 和 tFoot 很好，但 tBody 总是返回未定义。

使用浏览器调试器查看表对象内部，我可以看到 table.childNoes 和 table.children 显示了所有表部分，包括 tbody。

奇怪的是，如果我使用 tbody 部分的 ID 和 document.getElementById("TB") 访问它，它就可以正常工作。

有人可以向我解释一下吗？这是带有 JavaScript 的 HTML 源代码：

let table1 = document.getElementById("TBL1");

if (typeof(table1) != "undefined") {
  console.log(" - table element 'TBL1' acquired");

  let thead = table1.tHead;
  if (typeof(thead) != "undefined") {
    console.log(" - table element table1.tHead acquired,");
    thead.style.color = "#ffff50";
    console.log("   thead color changed to " + thead.style.color);
  } else
    console.log(" OOPS - could not access table table1.tHead");


  let tbody = table1.tBody;
  if (typeof(tbody) != "undefined") {
    console.log(" - table element table1.tBody acquired,");
    tbody.style.color = "#504020";
    console.log("   tbody color changed to " + tbody.style.color);
  } else
    console.log(" OOPS - could not access table table1.tBody");

  let tfoot = table1.tFoot;
  if (typeof(tfoot) != "undefined") {
    console.log(" - table element table1.tFoot acquired,");
    tfoot.style.color = "#ffff50";
    console.log("   tfoot color changed to " + tfoot.style.color);
  } else
    console.log(" OOPS - could not access table table1.tFoot");
} else
  console.log("OOP - Couldn't acquire TBL1 table");

if (typeof(tbody) == "undefined") {
  tbody = document.getElementById("TB");
  if (typeof(tbody) != "undefined")
    console.log(" - table element table1.tBody acquired using getElementById('TB'),");
  tbody.style.color = "#504020";
  console.log("   tbody color changed to " + tbody.style.color);
}

console.log(" - Done with table element access test");
thead,
tfoot {
  background-color: #3f87a6;
  color: #ffff;
}

tbody {
  background-color: #64d0c0;
  color: #ffff;
}

caption {
  padding: 10px;
  caption-side: bottom;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(120, 120, 120);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 0.8rem;
}

td,
th {
  border: 1px solid rgb(120, 120, 120);
  padding: 5px 10px;
}

td {
  text-align: center;
}
<body>
  <script>
    document.body.style.backgroundColor = "#A0C0C0";
    console.log("Testing table element access -");
  </script>

  <div ID="DIV1">
    <table ID="TBL1" style="margin-left: 100px; margin-top: 100px;">
      <caption>
        Council budget (in £) 2018
      </caption>

      <thead ID="TH">
        <tr ID="HROW">
          <td>Items</td>
          <td scope="col">Expenditure</td>
        </tr>
      </thead>

      <tbody ID="TB">
        <tr ID="BROW1">
          <td scope="row">Donuts</td>
          <td>3,000</td>
        </tr>
        <tr ID="BROW2">
          <td scope="row">Stationery</td>
          <td>18,000</td>
        </tr>
      </tbody>

      <tfoot ID="TF">
        <tr ID="FROW">
          <td scope="row">Totals</td>
          <td>21,000</td>
        </tr>
      </tfoot>
    </table>
</body>

javascript html html-table
3个回答
3
投票

HTMLTableElement 上没有 

tBody
属性。单个表中可以有 多个 
tbody
元素，因此有一个 
tBodies
集合，它返回所有元素的 NodeList。

在您的示例中，正如您所知，只有一个 

tbody
实例，您可以通过索引访问第 0 个元素：

let table1 = document.getElementById("TBL1");

if (table1) {
  let thead = table1.tHead;
  if (thead) {
    thead.style.color = "#ffff50";
  }

  let tbody = table1.tBodies[0]; // Note the property name and index accessor here
  if (tbody) {
    tbody.style.color = "#504020";
  }

  let tfoot = table1.tFoot;
  if (tfoot) {
    tfoot.style.color = "#ffff50";
  }
}
thead,
tfoot {
  background-color: #3f87a6;
  color: #ffff;
}

tbody {
  background-color: #64d0c0;
  color: #ffff;
}

caption {
  padding: 10px;
  caption-side: bottom;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(120, 120, 120);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 0.8rem;
}

td,
th {
  border: 1px solid rgb(120, 120, 120);
  padding: 5px 10px;
}

td {
  text-align: center;
}
<div id="DIV1">
  <table id="TBL1" style="margin-left: 100px; margin-top: 100px;">
    <caption>
      Council budget (in £) 2018
    </caption>
    <thead id="TH">
      <tr ID="HROW">
        <td>Items</td>
        <td scope="col">Expenditure</td>
      </tr>
    </thead>
    <tbody id="TB">
      <tr id="BROW1">
        <td scope="row">Donuts</td>
        <td>3,000</td>
      </tr>
      <tr id="BROW2">
        <td scope="row">Stationery</td>
        <td>18,000</td>
      </tr>
    </tbody>
    <tfoot id="TF">
      <tr id="FROW">
        <td scope="row">Totals</td>
        <td>21,000</td>
      </tr>
    </tfoot>
  </table>
</div>

如果表中存在多个 

tbody
元素，那么您可以实现一个循环来遍历所有元素。

另外，请注意，将 HTML 中的属性保持为小写通常是一种很好的做法，并避免使用内联 

style
属性。对所有样式使用外部样式表。

0
投票

一张表可以有多个主体，因此

tBody
上没有单个
HTMLTableElement
属性，而是
tBodies
数组1。

因此，您可以使用 

table1.tBodies[0]
访问您的表格主体（返回表格拥有的第一个也是唯一的主体）。

首先在文档中验证您尝试使用的某些属性是否存在总是好的，如果不存在，还有哪些其他属性可以实现您想要的功能！

1: 从技术上讲，它是一个 

NodeList
而不是数组。

0
投票

为了完整起见，这里使用 querySelector 是一样的

document.body.style.backgroundColor = "#A0C0C0";
console.log("Testing table element access -");


let table1 = document.getElementById("TBL1");

if (typeof(table1) != "undefined") {
  console.log(" - table element 'TBL1' acquired");

  let thead = table1.querySelector('thead');
  if (typeof(thead) != "undefined") {
    console.log(" - table element table1 thead acquired,");
    thead.style.color = "#ffff50";
    console.log("   thead color changed to " + thead.style.color);
  } else
    console.log(" OOPS - could not access table table1.tHead");


  let tbody = table1.querySelector('thead'); // first thead. Use querySelectorAll to get more
  if (typeof(tbody) != "undefined") {
    console.log(" - table element table1 tbody #1 acquired,");
    tbody.style.color = "#504020";
    console.log("   tbody color changed to " + tbody.style.color);
  } else
    console.log(" OOPS - could not access table table1.tBody");

  let tfoot = table1.querySelector('tfoot');
  if (typeof(tfoot) != "undefined") {
    console.log(" - table element table1 tFoot acquired,");
    tfoot.style.color = "#ffff50";
    console.log("   tfoot color changed to " + tfoot.style.color);
  } else
    console.log(" OOPS - could not access table table1.tFoot");
} else
  console.log("OOP - Couldn't acquire TBL1 table");

tbody = document.getElementById("TB");
if (typeof(tbody) != "undefined")
  console.log(" - table element table1 tbody acquired using getElementById('TB'),");
tbody.style.color = "#504020";
console.log("   tbody color changed to " + tbody.style.color);


console.log(" - Done with table element access test");
thead,
tfoot {
  background-color: #3f87a6;
  color: #ffff;
}

tbody {
  background-color: #64d0c0;
  color: #ffff;
}

caption {
  padding: 10px;
  caption-side: bottom;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(120, 120, 120);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 0.8rem;
}

td,
th {
  border: 1px solid rgb(120, 120, 120);
  padding: 5px 10px;
}

td {
  text-align: center;
}
<div id="DIV1">
  <table id="TBL1" style="margin-left: 100px; margin-top: 100px;">
    <caption>
      Council budget (in £) 2018
    </caption>

    <thead id="TH">
      <tr id="HROW">
        <td>Items</td>
        <td scope="col">Expenditure</td>
      </tr>
    </thead>

    <tbody id="TB">
      <tr id="BROW1">
        <td scope="row">Donuts</td>
        <td>3,000</td>
      </tr>
      <tr id="BROW2">
        <td scope="row">Stationery</td>
        <td>18,000</td>
      </tr>
    </tbody>

    <tfoot id="TF">
      <tr id="FROW">
        <td scope="row">Totals</td>
        <td>21,000</td>
      </tr>
    </tfoot>
  </table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.