Question

我的html中有这个：

<table id="my_table">
    <tbody>
        <tr>
            <td>my content</td>
        </tr>
        ...
    </tbody>
</table>

有没有简单的方法来解析表树并转到<td>元素（节点）？

Answer 1

CSS选择器（在css文件中使用 - 应用css样式的最简单方法）：

#my_table td {
  background-color: red;
}

如果您使用jQuery（以下代码将返回与引号中的查询匹配的元素集合）：

$("#my_table td")

如果你想迭代tds：

$("#my_table td").each(function(k, td) {
   $(td).css("css property", "css value");
});

Answer 2

阅读您的评论，您可以执行以下操作：

 var tbl = document.getElementById("my_table"); 
var cell  = tbl.getElementsByTagName("td")
cell[0].style.color = "red";
cell[0].style.border = "1px solid black";
cell[0].style.padding = "20px";
cell[0].style.background = "#c0c0c0";
cell[0].style.fontSize = "50px";

http://jsbin.com/aDiQuNU/2/edit?html,output

Answer 3

<table>个元素的行属性包含所有<tr>元素，<tr>元素具有包含所有<td>元素的单元格属性。

var table = document.getElementById("my_table");
var tr, td, r, c;

// Iterate the rows
for (r = 0; r < table.rows.length; r++) {
    tr = table.rows[r];

    // Iterate the cells
    for (c = 0; c < tr.cells.length; c++) {
        td = tr.cells[c];
        /*
         * r = current row number
         * c = current cell number
         * tr = current row
         * td = current cell
         */
    }
}

Answer 4

使用PHP编写的simpleHTMLDOM类解析html非常容易。检查其文档那里有几个例子

请点击以下链接

http://simplehtmldom.sourceforge.net/manual.htm

njoy报废：）

如何解析html元素的子元素？

4 个答案: