Dom--动态生成表格

最新推荐文章于 2022-06-06 16:56:18 发布
最新推荐文章于 2022-06-06 16:56:18 发布
阅读量237 收藏 1
点赞数 1
分类专栏： JS学习笔记 前端学习笔记 文章标签： JavaScript dom 动态生成表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38238041/article/details/80982637
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成表格</title>
	<link href="table.css" style="text/css" rel="stylesheet">
	<script type="text/javascript">
		function createTable(){
			var rowVal = parseInt(document.getElementById("row").value);
			var colVal = parseInt(document.getElementById("col").value);
			var oTableNode = document.createElement("table");
			if(isNaN(rowVal) || rowVal<=0){
				alert("行数必须是正整数");
				return ;
			}
			if(isNaN(colVal) || colVal<=0){
				alert("列数必须是正整数");
				return ;
			}
			//alert(rowVal+","+colVal);
			//for循环生成表格
			for(var i = 1; i<= rowVal;i++){
				var oTrNode = oTableNode.insertRow();
				for(var j = 1; j<= colVal;j++){
					var oTdNode = oTrNode.insertCell();
					oTdNode.innerHTML="<b>单元格" +i+ "--" +j+ "</b>";
				}
			}
			document.getElementById("div1").appendChild(oTableNode);
		}
	</script>
	
</head>
<body>
	<input type="text" id="row">
	<input type="text" id="col">
	<input type="button" value="生成表格" οnclick="createTable()">
	<div id="div1"></div>
</body>
</html>


逸川先生
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Dom——生成表格
zx2014567296的博客
07-17 716
生成表格 效果 如上图所示，生成表格，点击删除可删除那行 核心思想 数据是动态的，在正式项目中是使用数据库来实现的，这次利用js的对象储存数据来实现 往tbody里插入数据，行的个数为数组的长度；行里面用createElement创建单元格td，再用appendChild添加td，td的个数取决于数组元素个数 tr和td均用循环创建，外层tr用for循环，内层td可使用for…in…来实现（因为tr是一个对象） 把值赋给td（在for(var k in obj)中k得到属性名；obj[k]得到属性值 用
DOM--dom生成表格
m0_37058714的博客
07-11 511
实现以下三点：1.通过DOM生成表格2.点击“添加”按钮，在表格中插入数据（备注：若页面中无表格，创建表格）3.点击“删除”按钮，删除该人员js代码和html代码:&lt;div id='box'&gt; &lt;label for=""&gt;姓名：&lt;/label&gt;&lt;input type="text" name="" id='txt-name'&gt;
DOM动态生成表格
qq_38743783的博客
09-05 493
dom节点动态生成表格 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;tit
DOM 节点操作之动态生成表格
qq_39165819的博客
06-06 468
该动态生成表格的操作采用dom的节点操作，生成节点，移除节点等知识
DOM创建表格
普罗旺斯_浅笑的博客
03-12 477
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; var table =
dom-to-image.js
07-27
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错
JS控制网页动态生成任意行列数表格的方法
10-24
主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript 学习笔记（十三）Dom创建表格
12-10
Dom基础—创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。但第一种有可能在IE上有问题，所以推荐使用第二种。 1、insertRow(index)：index从0开始 这个函数将新行添加到index的...
Dom生成表格和实现分页源码
09-27
dom转化为表格显示源码，并且有很强大的分页功能，搭上就能用
JavaScript DOM操作表格及样式
12-12
标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption...
使用JavaScript和DOM动态创建表格
10-19
使用JavaScript和DOM动态创建表格
JQuery动态创建DOM、表单元素的实现代码
10-28
代码很简单，直接上代码。别忘记引用JQuery包。
DOM ------ 动态生成表格
HuoZhiyan 的博客
02-10 375
动态创建表格 1.数组中准备好数据 2.往tbody里创建行 3.往行里创建单元格 4.增加删除操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
用JS and DOM生成表格
cljspn的专栏
02-22 155
&lt;script language="javascript"&gt; function start(){ mybody = document.getElementsByTagName ("body").item(0); mytable = document.createElement("TABLE"); mytablebody = do...
DOM15---创建表格
奋斗、
06-08 1027
/*@import url(table.css);*/ <!-- 在页面中创建一个5行6列的表格 1、事件源，比如按钮 2、必须有一个生成的表格节点存储位置 --> function creTable1() { /* 可以通过创建元素的形式来完成 */ //1、创建表格节点 var oTabNode
DOM操作，javascript动态生成表格
yy211zhu的博客
03-30 3174
javascript动态生成表格，主要是利用DOM创建节点。 所利用到的函数主要有以下三个： document.createElement() document.gerElementByTagName() document.appendChild() 以下是简单的源代码：<!doctype html> <html> <head> <meta charset="utf-8"> <title>Dom操
【DOM】创建动态表格示例
你今天真好看呀
08-31 456
文章目录创建表格的原始方法使用节点对象创建表格 创建表格的原始方法 创建表格的基本方法： <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> table{ ...
使用DOM创建表格的完整流程
qq799155469的博客
12-30 754
1.创建表: var table=document.createElement("table"); 2.创建表头: var thead=table.createTHead(); var tr=thead.insertRow();//插入行 var th.createElement("th"); th.innerHTML=??; tr.appendChild(th); 3.创建表体:
dom创建table的一个方法
毁&灭
08-20 1460
  　　document.createElement("table")只是创建了一个对象，如果要把它添加到document中，还需要另外的方法（appendChild、insertAdjacentElement、insertBefore）         例子：                                                        
动态生成表格用DOM
最新发布
06-01
动态生成表格可以使用DOM（文档对象模型）来实现。以下是一个示例代码，用于创建一个3行3列的表格： ```javascript // 获取表格容器 var tableContainer = document.getElementById("table-container"); // 创建表格元素 var table = document.createElement("table"); // 创建表格行和单元格，并添加到表格中 for (var i = 0; i < 3; i++) { var row = document.createElement("tr"); for (var j = 0; j < 3; j++) { var cell = document.createElement("td"); cell.textContent = "Row " + i + ", Column " + j; row.appendChild(cell); } table.appendChild(row); } // 将表格添加到容器中 tableContainer.appendChild(table); ``` 在这个代码中，我们首先获取了一个表格容器元素，然后使用`document.createElement`方法创建一个`table`元素。接着使用两个嵌套的`for`循环来创建表格行和单元格，并将它们添加到表格中。最后，将表格添加到容器中即可完成动态生成表格的过程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值