JavaScript（JS）动态生成table（混合table）

最新推荐文章于 2023-01-19 18:01:38 发布

稚嫩的猿

最新推荐文章于 2023-01-19 18:01:38 发布

阅读量842

点赞数

分类专栏： JS 文章标签： js动态生成表格动态生成表格

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/DongBlog/article/details/83352274

版权

本文介绍如何使用JavaScript动态生成和管理HTML表格，包括添加新产品行、删除选中行的功能，适用于产品销售和业务服务两种场景。示例代码展示了如何在表格中插入输入框并设置样式，以及通过按钮控制表格的增删操作。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script>

function addProduct01(){

var tabObj=document.getElementById("inventoryTable01");//获取添加数据的表格

var rowsNum = tabObj.rows.length; //获取当前行数

var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数

var addRow = tabObj.insertRow(rowsNum);//插入新行

var addRow0=addRow.insertCell(0);

addRow0.innerHTML="<input type='checkbox' name='chkArr01' id='chkArr01'"+rowsNum+" style='width:20px' />";

var addRow1=addRow.insertCell(1);

addRow1.innerHTML="<input type='test' name='productName' id='productName'"+rowsNum+" style='border:0px;width:180px' />";

var addRow2=addRow.insertCell(2);

addRow2.innerHTML="<input type='test' name='specifications' id='specifications'"+rowsNum+" style='border:0px;width:180px' />";

var addRow3=addRow.insertCell(3);

最低0.47元/天解锁文章

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（JS）动态生成table（混合table）

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html;
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。