将 class 应用于 <td>

Question

如何找到每个 <td> 元素中包含的 <p> 元素的 class 名称，然后将 class 添加到 <td> 元素的 class 列表?

<table>
    <tr>
        <td colspan="1">
            <p class="Hello_blue">Hello Stack Overflow1</p>
        </td>
        <td rowspan="1" colspan="2">
            <p class="Hello_red">Hello Stack Overflow2</p>
            <p class="Hello_red">defines red color,that class want to apply to</p>
        </td>
        <td rowspan="1" colspan="1">
            <p class="Hello_orange">Hello Stack Overflow3</p>
        </td>
    </tr>
</table>

<td> 个元素会有 class 个像这样的

<td rowspan="1" colspan="1" class="blue">...</td>
<td rowspan="1" colspan="1" class="red">...</td>
<td rowspan="1" colspan="1" class="orange">...</td>

Answer 1

Select 所有 <p> 元素是 <td> 元素的子元素，然后遍历并将每个 <p> 元素的 class 分配给其父元素元素.

(function(){
    window.onload = function() {
        "use strict";
        var paragraphs = document.querySelectorAll('td p'), paragraph, i;
        for(i = 0; (paragraph = paragraphs[i]); i++) {
            paragraph.parentNode.className += paragraph.className.replace('hello_','');
        }
    }
})();

Answer 2

您可以在 table 中搜索 p 标签，然后找到最接近的父 td 并指定 class 名称。

使用普通 Javascript:

// convert "Hello_blue" to "blue"
function convertClassName(src) {
    return src.replace(/^.*?_/, "");
}

var pTags = document.querySelectorAll("table p");
for (var i = 0; i < pTags.length; i++) {
    pTags[i].parentNode.className += " " + convertClassName(pTags[i].className);
}

工作演示：http://jsfiddle.net/jfriend00/6bvwu5qL/

使用jQuery:

// convert "Hello_blue" to "blue"
function convertClassName(src) {
    return src.replace(/^.*?_/, "");
}

$("table p").each(function() {
    $(this).closest("td").addClass(convertClassName(this.className));
});

工作演示：http://jsfiddle.net/jfriend00/36oejbx4/

在加载 DOM 之后，这些代码块中的任何一个都应该是运行。这意味着您要么将它们放在文档末尾的脚本标记中，要么从直到 DOM 加载后才调用的函数中调用它们，或者从事件处理程序中调用它们（例如onload) 等待 DOM 被加载。

将 class 应用于 <td>

Apply class to <td>

javascript

html-table