Question

我有一个包含标题内容的表格，如下所示。

<table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>
                       Date
                    </th>
                    <th>
                        Year
                    </th>
                    <th>
                        HalfYear
                    </th>
                    <th>
                        Quarter
                    </th>
                    <th>
                        Month
                    </th>
                    <th>
                        Site
                    </th>
               </tr>
         </thead>
</table>

因此，从上表中我尝试阅读所有<th>标记内容/数据，并动态地用新数据替换内容。

如何获取所有<th>元素内容并使用jQuery中的新内容对其进行编辑。

Answer 1

您可以使用其each函数迭代选定的jQuery对象集合，例如：

$('th').each(function (iteration, node) {
    var oldCaption = $(node).text();
    $(node).text(oldCaption + ' renewed');
});

有关示例中使用的函数的更多in-deph信息，请参阅jQuery文档：

Answer 2

Vanilla JS是这样的：

var table = document.getElementById("example");
var ths = table.getElementsByTagName("th");
for(var i=0; i<ths.length; i++){
    ths[i].innerHTML = "my value";
}

Answer 3

如果你想要单独访问每个“th”

你应该给每个人一个“ID”：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th id="date">
                Date
            </th>
            <th id="year">
                Year
            </th>
            <th id="halfyear">
                HalfYear
            </th>
            <th id="quarter">
                Quarter
            </th>
            <th id="month">
                Month
            </th>
            <th id="site">
                Site
            </th>
        </tr>
    </thead>
</table>

您可以使用此功能：

<script type="text/javascript">
function changeTableData(name, value){
    document.getElementById(name).innerHTML = value;
}
</script>

你这样使用它：

 changeTableData("date", "my date")
 changeTableData("year", "my year");

如何获取表行的所有子元素并动态更改数据？

3 个答案: