js 插入thead

最新推荐文章于 2023-04-30 15:50:40 发布

codsoul2

最新推荐文章于 2023-04-30 15:50:40 发布

阅读量744

点赞数

分类专栏： JS 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/codsoul2/article/details/84002281

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
thead { color:red; }
</style>
<script type="text/javascript">
window.onload = function() {
    //前2行套上thead标签
    var table = document.getElementById('tab1');
    var row_01 = table.getElementsByTagName('tr')[0];
    var row_02 = table.getElementsByTagName('tr')[1];
    var cloneRow_01 = row_01.cloneNode(true);
    var cloneRow_02 = row_02.cloneNode(true);
    var thead = document.createElement('thead');
    var tbody = table.getElementsByTagName('tbody')[0];
    thead.appendChild(cloneRow_01);
    thead.appendChild(cloneRow_02);
    tbody.removeChild(row_01);
    tbody.removeChild(row_02);
    table.insertBefore(thead, tbody);
}
</script>
</head>

<body>
    <table id="tab1" border="1">
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>A1</td>
            <td>B1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
        </tr>
    </table>
</body>
</html>

codsoul2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 插入thead

[code="html"]无标题文档thead { color:red; }window.onload = function() { //前2行套上thead标签 var table = document.getElementById('tab1'); var row_01 = table.getElementsByTagNam...
复制链接

扫一扫

专栏目录