js自动创建表格

最新推荐文章于 2023-10-17 20:21:20 发布
最新推荐文章于 2023-10-17 20:21:20 发布
阅读量538 收藏
点赞数
分类专栏： Nginx

<!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=GBK" />
<title>自动创建表格</title>
<style type="text/css">
table{
    width:300px;
    height:100px;
    border:#0C9 1px solid;
    border-collapse:collapse;
    }
</style>
<script type="text/javascript" language="javascript">
function autocreate(){
    //创建table表格
    var table=document.createElement("table");
    table.setAttribute("border","1");
    table.setAttribute("background","red");
    //获取行数值
    var line=document.getElementById("line").value;
    //获取列数值
    var list=document.getElementById("list").value;
    for(var i=0;i<=line;i++){
        //alert(line);
        //创建tr
        var tr=document.createElement("tr");
        for(var j=0;j<=list;j++){
            //alert(list);
            //创建td
            var td=document.createElement("td");
            tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        document.getElementById("d1").appendChild(table);
    }
</script>
</head>
<body>
<input type="text" id="line">行数
<input type="text" id="list">列数
<input type="button" value="添加表格" οnclick="autocreate()">
<div id="d1" style="height:400px; width:300px;"></div>
</body>
</html>

 

<!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>
 <title>Js动态创建表格</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script>
 var table = document.createElement("table");
 table.setAttribute("border","1");
 table.setAttribute("width","100%");
 var tbody = document.createElement("tbody");
 table.appendChild(tbody);

 //创建第一行
 tbody.insertRow(0);
 tbody.rows[0].insertCell(0);
 tbody.rows[0].cells[0].appendChild( document.createTextNode("Cell 1.1") );
 tbody.rows[0].insertCell(1);
 tbody.rows[0].cells[1].appendChild( document.createTextNode("Cell 2.1") );

 //创建第二行
 tbody.insertRow(1);
 tbody.rows[1].insertCell(0);
 tbody.rows[1].cells[0].appendChild( document.createTextNode("Cell 1.2") );
 tbody.rows[1].insertCell(1);
 tbody.rows[1].cells[1].appendChild( document.createTextNode("Cell 2.2") );

 document.body.appendChild(table);
</script>
</body>
</html>

 

forBurnInG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS封装的自动创建表格的实现代码
10-22
主要介绍了JS封装的自动创建表格的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
js简单实现自动生成表格功能示例
10-15
在JavaScript编程中，自动生成表格是一项常见的任务，特别是在动态网页应用中。本示例通过JavaScript实现了根据给定数据自动生成HTML表格的功能，涉及到的核心知识点包括数组遍历、DOM操作以及事件处理。 首先，...
js动态创建表格（Table行间距，行高），JavaWeb文件下载
追求卓越583的博客
10-08 1848
js动态创建表格（Table），JavaWeb文件下载
使用原生js和layui动态创建一个数据表格，实现简单增删改查功能
最新发布
weixin_50963877的博客
10-17 1488
动态创建表格，先在html里面写入表头thead里的内容，然后写一个空的tbody。接下来使用js来读取数据，并创建表格，我们使用双重循环来遍历数组中存储的对象，并创建tr 和td加以赋值这样已知数据的表格已经生成，接下来我们加入添加按钮，加入三个input框，用于取用户输入的值。根据以上办法可以做到动态数据表格。但是代码太过繁琐，所以，在学习了layui之后我们使用layui来制作数据表格。相比原生js来说，layui则比较便捷，只需要在html里创建一个容器，写一行table代码即可。
原生js动态创建table表格
u010234868的专栏
06-20 1879
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table { border-collapse: collapse; } </style> </head> <body> <div id="box"></d.
JavaScript动态创建table表格
weixin_54366356的博客
06-08 1988
平时我们在用js去动态生成table表格的时候，都是一遍遍的去循环遍历数组中的字段，而在前端页面中表格多的时候就要写好多这样的代码，比较繁琐… 使用如下方法，直接调用即可生成table <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
JavaScript 自动在表格前面增加序号
12-02
本文将详细介绍如何使用JavaScript自动在表格前面增加序号。 首先，我们需要创建一个符合设计样式的表格。在CSS样式表中，我们定义了表格`.index_tab`的样式，包括宽度、边框合并、边框宽度、内边距以及外边距。...
HTML 自动伸缩的表格Table js实现
10-30
为了解决这个问题，我们可以利用JavaScript实现表格的自动伸缩功能。这种功能能够根据单元格中内容的实际高度动态调整行的高度，确保表格各行的整齐。 在本文中，我们将讨论一种名为AutoTableSize的JavaScript解决...
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
js 实现 表格设置为“100%”时获取表格的宽度
03-31
js 实现 表格设置为“100%”时获取表格的宽度! 值得下载看看!资源免费,大家分享!!
js动态创建table点击按钮dom table tr添加操作
11-11
js动态创建table点击按钮dom table tr添加操作
JS小功能(操作Table--动态添加删除表格及数据)实现代码
10-26
主要介绍了操作Table--动态添加删除表格及数据实现代码，有需要的朋友可以参考一下
javascript原生表格
11-04
javascript原生表格javascript原生表格javascript原生表格
javascript动态创建表格及添加数据实例详解
12-09
本文实例讲述了javascript动态创建表格及添加数据的方法。分享给大家供大家参考。具体分析如下： 1. 动态创建表格（代码不兼容IE6） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态创建表格</title> [removed] function AppendTableData() { var table = document.ge
利用createElement() 为表格动态添加行
gischen
11-04 4216
New Document function addRow(){var t1=document.getElementById("t1");var divObj = document.createElement("div");var row1 = document.createElement("TR");row1.height = 110;var col1=document.createElemen
JS如何自定义创建表格
前端技术分享
04-20 5267
自定义创建表格行列
JavaScript如何动态的设置表格的样式
asdadasdasd111的专栏
09-14 1659
二、动态给表插入行： function addRow(){   //动态插入一行   var oRow1=mediaMes.insertRow(mediaMes.rows.length);   //设置tr的id   oRow1.id="tr"+thisId;   //获得表总的行数   var aRows=mediaMes.rows;   //获得新添加行的列集合   var aCells=oR
使用JS创建表格和得到/修改样式
超超超超哥的博客
06-20 1167
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> Insert title here window.onload=function() { var table=document.createElement("table"); docu
在js中使用createElement创建HTML对象和元素
weixin_30432007的博客
04-01 266
1.创建链接 <script language="javascript">varo = document.body;//创建链接functioncreateA(url,text){vara = document.createElement("a");a.href = url;a.innerHTML = text;a.style.color ="...
创建表格，每一个单元格自动生成id号，html
07-10
以下是一个示例的HTML代码，用于创建一个3x3的表格，并为每个单元格自动生成ID号： ```html <!DOCTYPE html> <title>Table with Auto-generated IDs window.onload = function() { var table = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值