Question

我正在对存储在表中的值进行一些操作和检索。

每行包含记录，其中每列代表该记录的属性。就像你通常如何看待数据库表一样。

所以我的第一个问题是：使用行的已知childNodes []索引访问行中的元素是安全/可接受/可移植的做法吗？

给出这个示例表：

<table id='sometable'>
    <thead><tr><th>Name</th> <th>Age</th></tr></thead>
    <tbody>
       <tr><td>Bob</td><td>25</td></tr>
       <tr><td>Alice</td><td>31</td></tr>
    </tbody>
</table>

这样做可以吗？

  /* Get just the 'tbody' rows, i.e. not the header row */
  function getTableBodyRows(tblName){
    return document.getElementById(tblName).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
  }

  /* Get the 'name' value for each row */
  function getNames( ){
     var rows = getTableBodyRows('sometable');
     var names = [];
     for( var i=0; i < rows.length; i++ ){
         /* This line assumes childNode[0] of the row is the 'name' cell (td) which
            contains only a single text node.  */
         names.push( rows[i].childNodes[0].childNodes[0].nodeValue);
     }
     return names;
  }

除了我可能会定义一个值来表示列号而不是使用文字这一事实，这种方法有什么问题吗？

我想到的另一种选择是为每个<td>添加一个类属性来识别单元格的内容，然后使用getElementsByClassName()方法检索单个值，但它看起来像性能大型桌子会受到重创。并且导致编写更多代码而没什么好处。

是否有其他常用技巧可以完成诸如“从表格行'x'获取'名称'值”之类的任务？

我还应该注意到我使用javascript生成表格，所以我不认为我不必担心不同浏览器可能会或可能不会将空格视为childNode的问题。

Answer 1

“使用行的已知childNodes []索引访问行中的元素是安全/可接受/可移植的做法吗？”

如果按元素，你的意思是单元格，那么没有。您应该使用行的.cells属性来避免单元格之间存在潜在的空白。

我会像这样更新您的代码：

  function getNames( ){
     var rows = document.getElementById('sometable').tBodies[0].rows;
     var names = [];
     for( var i=0; i < rows.length; i++ ){
         names.push( rows[i].cells[0].childNodes[0].nodeValue);
     }
     return names;
  }

请注意，我还使用了.tBodies的{{1}}属性和table的{{1}}属性。

您还可以直接在.rows上使用tbody属性来获取表格中的所有行。

我错过了你关于空格的最后一句话，但我仍然使用表提供的内置集合而不是DOM选择方法。

当他们在那里等你时，没有意义建立新的收藏品。 ;）

虽然.rows在没有空格时可以正常工作，但使用table会更好习惯。

关于表操作的DOM问题

1 个答案: