tr cells 集合

tr 对象参考手册 tr 对象

显示第一行的单元格数量：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <script>
    function displayResult() {
      alert(document.getElementById("myTable").rows[0].cells.length);
    }
  </script>
</head>
<body>

  <table id="myTable" border="1">
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
    </tr>
    <tr>
      <td>cell 3</td>
      <td>cell 4</td>
    </tr>
  </table>
  <br>
  <button type="button" onclick="displayResult()">显示第一行单元格的数量</button>

</body>
</html>

尝试一下 »

定义和用法

cells 集合返回表格行中所有 <td> 或 <th> 元素的个数。

注意: 元素在集合中的顺序为与在源代码中的顺序是一致的。

浏览器支持

集合
cells Yes Yes Yes Yes Yes

语法

tableObject.cells

属性

属性 描述
length 返回集合中 <td> 或 <th> 元素的个数。

注意: 这个属性是只读的。

方法

方法 描述
[name_or_index] 一个整数，指定元素检索位置（从0开始）
item(name_or_index) 返回集合中的指定索引的元素
namedItem(name) 返回集合中指定名称索引的元素索引

技术描述

DOM 版本: Core Level 2 Document Object
返回值: HTMLCollection 对象, 表示 <tr> 中所有 <td> 或 <th> 元素。 元素在集合中的顺序为与在源代码中的顺序是一致的。

更多实例

[index]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <p>点击按钮弹出第一行第一个单元格的内容：</p>

  <table id="myTable">
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
    <tr>
      <td>Row3 cell1</td>
      <td>Row3 cell2</td>
    </tr>
  </table>
  <br>

  <button onclick="myFunction()">点我</button>

  <script>
    function myFunction() {
      alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
    }
  </script>

</body>
</html>

尝试一下 »


item(index)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <p>点击按钮弹出第一行第一个单元格的内容：</p>

  <table id="myTable">
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
    <tr>
      <td>Row3 cell1</td>
      <td>Row3 cell2</td>
    </tr>
  </table>
  <br>

  <button onclick="myFunction()">点我</button>

  <script>
    function myFunction() {
      alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);
    }
  </script>

</body>
</html>

尝试一下 »


namedItem(id)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <p>点击按钮弹出第一行 id="myTd" 单元格的内容：</p>

  <table id="myTable">
    <tr>
      <td id="myTd">Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
    <tr>
      <td>Row3 cell1</td>
      <td>Row3 cell2</td>
    </tr>
  </table>
  <br>

  <button onclick="myFunction()">点我</button>

  <script>
    function myFunction() {
      alert(document.getElementById("myTable").rows[0].cells.namedItem("myTd").innerHTML);
    }
  </script>

</body>
</html>

尝试一下 »


修改第一个单元格的内容:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <p>点击按钮修改第一个单元格的内容。</p>

  <table id="myTable">
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
    <tr>
      <td>Row3 cell1</td>
      <td>Row3 cell2</td>
    </tr>
  </table>
  <br>

  <button onclick="myFunction()">点我</button>

  <script>
    function myFunction() {
      var x = document.getElementById("myTable").rows[0].cells;
      x[0].innerHTML = "NEW CONTENT";
    }
  </script>

</body>
</html>

尝试一下 »

tr 对象参考手册 tr 对象