将类应用于<td>

Apply class to <td>

本文关键字：td 应用于      更新时间：2023-09-26

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

<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>元素将具有如下的类

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

您可以在表中搜索p标签，然后找到最接近的父td并分配类名。

// 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加载后才调用的函数中调用它们，或者从等待DOM加载的事件处理程序(如onload)中调用它们。

选择<td>元素的所有子<p>元素，然后遍历并将每个<p>元素的类赋值给它的父元素。

(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_','');
        }
    }
})();
相关文章：