Javascript 关于表操作的DOM问题

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

每行包含一条记录，其中每列表示该记录的属性。很像您通常对数据库表的看法

因此，我的第一个问题是：使用行的已知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>

姓名年龄
Bob25
Alice31

这样做可以吗

  /* 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;
  }

/*只获取“tbody”行，即不获取标题行*/
函数getTableBodyRows（tblName）{
返回文档.getElementById（tblName）.getElementsByTagName（'tbody'）[0].getElementsByTagName（'tr'）；
}
/*获取每行的“name”值*/
函数getNames（）{
var rows=getTableBodyRows（'sometable'）；
变量名称=[]；
对于（变量i=0；i

除此之外，我可能会定义一个值来表示列数，而不是使用literal，这种方法有什么错误吗

我想到的另一种方法是在每个

中添加一个class属性来标识单元格的内容，然后使用

getElementsByClassName（）

方法来检索单个值，但对于大型表来说，性能似乎会受到很大的影响。这样做的结果是编写更多的代码，但收效甚微

是否有其他常见的技术来完成任务，如“从表行“x”获取“name”值”

我也应该注意到我正在用JavaScript生成我的表，所以我不认为我必须担心不同的浏览器如何可能或不考虑子节点的空白。 “使用行的已知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;
  }

函数getNames（）{
var rows=document.getElementById（'sometable'）.tBodies[0]。行；
变量名称=[]；
对于（变量i=0；i

请注意，我还使用了

表

的

.tBodies

属性和

tbody

的

行

属性

您还可以直接使用

表上的
.rows
属性来获取表中的所有行


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

当他们就在那里等着你的时候，建立新的收藏是毫无意义的

当没有空格时，
childNodes
可以工作，但是使用
.cells
是一个更好的习惯

“使用行的已知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;
  }

函数getNames（）{
var rows=document.getElementById（'sometable'）.tBodies[0]。行；
变量名称=[]；
对于（变量i=0；i

请注意，我还使用了
表
的
.tBodies
属性和
tbody
的
行
属性

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


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

当他们就在那里等着你的时候，建立新的收藏是毫无意义的

当没有空格时，
childNodes
可以工作，但最好使用
.cells
以及表或tbody的
行
属性来避免同样的问题。啊，你现在已经提到了。是的，我的意思只是细胞。这可以完美地工作，并产生更具可读性的代码。谢谢。还有表或tbody的
行
属性，以避免同样的问题。啊，你现在已经提到了。是的，我的意思只是细胞。这可以完美地工作，并产生更具可读性的代码。谢谢