javascript_操作表格

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/62047102

表格的一些常用属性:
caption(唯一) / tBodies / tFoot / tHead / rows / cells
一些常用方法:
createTHead() / createCaption() / deleteTHead()

获取caption

table.caption.innerHTML

获取tBody中的列数 (tHead/tBodies)

table.tBodies[0].rows.length

获取行数:

table.rows.length

获取一行的列数

table.rows[1].cells.length

deleteCaption(); 删除caption属性

table.deleteCaption();

deleteTHead() 删除tHead一行

table.deleteTHead(1);

deleteRow(num) 删除行

table.deleteRow(2);

deleteCell(num); 删除第3行第3列的单元格

table.rows[2].deleteCell(2);

创建表格

createCaption() 创建Caption
createTHead() 创建tHead
insertRow(num) 创建行
insertCell(num) 创建列
tFoot tHead 返回引用

            var table = document.createElement("table");
            table.border = 1;
            table.width = '300';
            var caption = table.createCaption();
            caption.innerHTML = "人员信息";     // 创建caption

            var thead = table.createTHead();    // 创建thead
            var tr1 = thead.insertRow(0);
            tr1.insertCell(0).innerHTML = "姓名";
            tr1.insertCell(1).innerHTML = "性别";
            tr1.insertCell(2).innerHTML = "年龄";

            var tbody = table.createTBody(0);
            var tbody_tr = tbody.insertRow(0);
            tbody_tr.insertCell(0).innerHTML = "张三";
            tbody_tr.insertCell(1).innerHTML = "男";
            tbody_tr.insertCell(2).innerHTML = "30";

            var tr2 = table.insertRow(2);
            tr2.insertCell(0).innerHTML = "李四";
            tr2.insertCell(1).innerHTML = "男";
            tr2.insertCell(2).innerHTML = "40";

            document.body.appendChild(table);       // 容易遗忘

创建完后再浏览器中检查网页会多出一段HTML代码:

    <table border=1 width=300>
        <caption>人员信息</caption>
        <tHead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>张三</td>
                <td></td>
                <td>20</td>
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <td>30</td>
            </tr>
        </tBody>
    </table>
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
2月前
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
10天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
10天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
17天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
17天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
1月前
|
JavaScript 前端开发
JavaScript操作BOM简单案例
JavaScript操作BOM简单案例
9 1