JavaScript对HTML页面的table进行行列操作

最新推荐文章于 2025-07-04 23:20:19 发布

原创最新推荐文章于 2025-07-04 23:20:19 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript进行HTML表格的行列操作，包括删除行、添加行、删除指定单元格和添加指定单元格等基本操作，是提升网页交互性的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript对HTML页面的table进行行列操作

行的操作
- deleteRow(index)删除行
- insertRow(index)添加行
列的操作
- deleteCell(index)删除指定单元格
- insertCell(index)添加指定单元格
表格操作示例

        function initTable(userList){
            var table=document.getElementById("userTable");
            for(var i = 0; i < userList.length; i++){
                var userInfo = userList[i];
                var row = table.insertRow();
                var col1 = row.insertCell();
                col1.innerHTML = userInfo.userId;
                var col2 = row.insertCell();
                col2.innerHTML = userInfo.userCode;
                var col3 = row.insertCell();
                col3.innerHTML = userInfo.userNikename;
                var col4 = row.insertCell();
                col4.innerHTML = userInfo.userGender;
                var col5 = row.insertCell();
                col5.innerHTML = userInfo.userEmail;
            }
        }