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

最新推荐文章于 2022-08-30 15:24:49 发布
最新推荐文章于 2022-08-30 15:24:49 发布
阅读量839 收藏 1
点赞数
分类专栏： JS 文章标签： js动态生成表格 动态生成表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongblog/article/details/83352274
版权

<!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);

        addRow3.inne

最低0.47元/天 解锁文章
稚嫩的猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态创建Html表格
m0_48668242的博客
01-19 495
js动态创建html表格
如何把Excel转成html table表格代码
wrangler_csdn的博客
05-24 3047
前端开发工作中有时候需要从Excel表格的数据转成网页显示， 虽然Excel可以另存成为html，不过含有太多各种标签和样式，还需要重新调整，比较麻烦， 后来找到一个工具可以直接粘贴Excel数据转换成为html表格： 打开这个网站 https://www.strerr.com/cn/tableizer.htmlhttps://www.strerr.com/cn/tableizer.html 复制Excel数据内容 ...
Table根据接口返回生成动态表格
callmeCassie的博客
07-28 3104
vue table 这是在知道表格需要展示的内容时的代码，需要在columns中定义表格列的配置描述 但如果我们不知道表格列的配置描述，只能等接口返回的时候才知道，这时候就需要动态生成 这是接口返回数据，data数据格式如下 des 这是主要代码 obj.title=i obj.dataIndex=i obj.key=i column......
动态生成表格案例（HTML+CSS+JS）
m0_48375854的博客
12-21 5176
在这里实现一个动态添加表格的案例，当点击添加按钮时，可以弹出一个表单，然后将输入的内容添加到表格中，也可以将表格中的整行内容清除。 实现代码为： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0;
关于动态生成html中的table表格样式模版，Java。利用Document和Element类。
鹏神丶明月天
08-30 2043
List中有多少元素，就合并多少单元格。一个标题a为一个整的单元格。按照实体类中的一个集合属性去判断合并多少单元格，遍历集合中的数据获得需合并单元格多少单元格的数据。思路便是：先创建一个模板单元格，然后通过其属性去动态更改table中的元素标签。类似于生成此动态，需要根据业务去合并不同数量的单元格的table表格。...
JavaScript高级教程
09-10
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述.........................3.5.5 动态原型方法..............................................82 3.5.6 混合工厂方式........
java开源包1
06-28
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件，提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
JAVA上百实例源码以及开源项目
01-03
JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 　Java编写的HTML浏览器源代码，一个很简单甚至不算是浏览器的HTML浏览器...
java开源包11
06-28
JSEditor 是 Eclipse 下编辑 JavaScript 源码的插件，提供语法高亮以及一些通用的面向对象方法。 Java数据库连接池 BoneCP BoneCP 是一个高性能的开源java数据库连接池实现库。它的设计初衷就是为了提高数据库连接...
html表格实验心得,js操作table示例(个人心得)
weixin_42370743的博客
06-09 552
记得以前面试的时候遇到过这样一个问题：有一个表格，然后有4个输入框，一个合并按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并 。当时我从学校出来，js知识只是知道一些，根本做不到！现在想想，其实这个问题也还是考基础功夫是否扎实！大家有兴趣可以自己做做看，测下自己是不是能够做出来。题目的截图：现在做这个问题，看起来简单，但我还是花了很长时间，可能是我的思路不对吧？主要就...
html动态添加table行
10-12
实现自动添加table行，增删改查功能统一完成实现，统一提交
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
html表格自动跨页,利用js制作html table分页示例(js实现分页)
weixin_39638526的博客
05-30 851
有时候table的列数太长，不利于使用者查询，所以利用JS做了一个table的分页，以下为相关代码一、JS代码var pageSize = 15; //每页显示的记录条数var curPage=0; //当前页var lastPage; //最后页var direct=0; //方向var len; //总行数var page;...
html创建一个数据表,从MySQL提取数据，并创建一个HTML表格，并使用数据表的jQuery插件...
Aysen的博客
06-05 274
行，所以我做得到它的工作首先我创建一个类StudentLoginData.cs其中包含房产按在列表。public class StudentLoginDetails{public string student_id { get; set; }public string fname { get; set; }public string lname { get; set; }public string...
从数据库读取数据,并展示到网页上
weixin_45167843的博客
07-05 3543
目录1.在navicat中编辑数据库2.在models.py文件中读取数据库3.创建exam蓝图的包，将读取的数据传入exam.py中，返回json格式4.在主应用__init__.py文件中的app对象上注册这个exam蓝图对象5.html页面中table id6.在examination.js中用jquery，ajax方法刷新页面 1.在navicat中编辑数据库 以超声系统我们的数据库为例，目录为Navicat-web_final-表-setofquestion 2.在models.py文件中读取数
html如何制作动态表格，增加或者删除
热门推荐
weixin_41808376的博客
03-08 1万+
功能如图所示核心代码如下html部分 &lt;div class="extends" &gt; &lt;div class="extends_item" style="height:400px;width:100%; padding-left:1%" &gt; &lt;div class="title"&gt;&lt;span style=&
js 循环动态生成table表格
最新发布
04-29
可以使用 JavaScript 中的 DOM 操作来动态生成表格。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态生成表格</title> </head> <body> <button onclick="createTable()">生成表格</button> <div id="tableContainer"></div> <script> // 创建表格 function createTable() { // 获取容器元素 let container = document.getElementById("tableContainer"); // 创建 table 元素 let table = document.createElement("table"); // 创建表头 let headerRow = document.createElement("tr"); let header1 = document.createElement("th"); let header2 = document.createElement("th"); header1.innerHTML = "姓名"; header2.innerHTML = "年龄"; headerRow.appendChild(header1); headerRow.appendChild(header2); table.appendChild(headerRow); // 创建数据行 let dataRow1 = document.createElement("tr"); let data1_1 = document.createElement("td"); let data1_2 = document.createElement("td"); data1_1.innerHTML = "张三"; data1_2.innerHTML = "20"; dataRow1.appendChild(data1_1); dataRow1.appendChild(data1_2); table.appendChild(dataRow1); let dataRow2 = document.createElement("tr"); let data2_1 = document.createElement("td"); let data2_2 = document.createElement("td"); data2_1.innerHTML = "李四"; data2_2.innerHTML = "22"; dataRow2.appendChild(data2_1); dataRow2.appendChild(data2_2); table.appendChild(dataRow2); // 将表格添加到容器中 container.appendChild(table); } </script> </body> </html> ``` 这个示例中，当用户点击“生成表格”按钮时，`createTable` 函数会被调用。该函数首先获取一个容器元素（`<div>`），然后创建一个 `<table>` 元素。接着，函数创建表头和数据行，并将它们添加到表格中。最后，将表格添加到容器中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值