JS动态生成html表格

最新推荐文章于 2021-10-11 16:06:56 发布
最新推荐文章于 2021-10-11 16:06:56 发布
阅读量4.1k 收藏
点赞数
分类专栏： HTML/CSS/DIV 文章标签： html input function button table border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaominhua/article/details/6604838
版权 
 
 

  
  

   
   <!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {
	color: #00FFCC;
	font-weight: bold;
}
-->
</style>


<script language="javascript">
function AttachEvent(target, eventName, handler, argsObject) {
	var eventHander = handler;
	if (argsObject) {
		eventHander = function(e) {
			handler.call(argsObject, e);
		}
	}
	if (window.attachEvent)// IE
		target.attachEvent("on" + eventName, eventHander);
	else
		// FF
		target.addEventListener(eventName, eventHander, false);
}
function test(){
alert("my name is button");
}
function test1(){
alert("my name is  text");
}
function test2(obj){
alert(this.value);
}


function init(){
	var tb = document.createElement("table");
	tb.setAttribute("id","New_table");
	tb.setAttribute("border",1);
	var tr = document.createElement("tr");
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	var td4 = document.createElement("td");
	var td5 = document.createElement("td");
	var input1 = document.createElement("input");
	input1.setAttribute("type","button");
	input1.setAttribute("value","button");
	input1.attachEvent("onclick", test);
	var input2 = document.createElement("input");
	input2.setAttribute("type","text");
	AttachEvent(input2,"change",test1);
	
	
	var input5 = document.createElement("input");


	input5.setAttribute("type","text");
	
	AttachEvent(input5,"change",test2,input5);
	
	
	var input3 = document.createElement("span");
	input3.setAttribute("class","STYLE1");
	var input2Text = document.createTextNode("ssssssss");
	var input4 = document.createElement("textarea");
	input4.setAttribute("name","Textarea");
	input4.setAttribute("rows",3);
	input4.setAttribute("cols",20);
	//input4.attachEvent("onchange",f);
	input3.appendChild(input2Text);
	td1.appendChild(input1);
	td2.appendChild(input2);
	td3.appendChild(input3);
	td4.appendChild(input4);
	td5.appendChild(input5);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	tb.appendChild(tr);
	document.getElementById("Panel").appendChild(tb);
		
	
}




</script>
</head>


<body  οnlοad="init()">




<!--
  <table id="New_table" border="1">
    <tr><td><input type="button"   οnclick="test()"/></td>
	<td><input type="text"   οnchange="test1()"/></td>
	 <td><span class="STYLE1">ssssssss</span></td>
	 <td><textarea name="TextArea" οnchange="test2(this)" rows="3" cols="20"></textarea></td>
	</tr>
  </table>
  -->
  <div id="Panel">
</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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {
	color: #00FFCC;
	font-weight: bold;
}
-->
</style>


<script language="javascript">
function AttachEvent(target, eventName, handler, argsObject) {
	var eventHander = handler;
	if (argsObject) {
		eventHander = function(e) {
			handler.call(argsObject, e);
		}
	}
	if (window.attachEvent)// IE
		target.attachEvent("on" + eventName, eventHander);
	else
		// FF
		target.addEventListener(eventName, eventHander, false);
}
function test(){
alert("my name is button");
}
function test1(){
alert("my name is  text");
}
function test2(obj){
alert(this.value);
}


function init(){
	var tb = document.createElement("table");
	tb.setAttribute("id","New_table");
	tb.setAttribute("border",1);
	var tr = document.createElement("tr");
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	var td4 = document.createElement("td");
	var td5 = document.createElement("td");
	var input1 = document.createElement("input");
	input1.setAttribute("type","button");
	input1.setAttribute("value","button");
	input1.attachEvent("onclick", test);
	var input2 = document.createElement("input");
	input2.setAttribute("type","text");
	AttachEvent(input2,"change",test1);
	
	
	var input5 = document.createElement("input");


	input5.setAttribute("type","text");
	
	AttachEvent(input5,"change",test2,input5);
	
	
	var input3 = document.createElement("span");
	input3.setAttribute("class","STYLE1");
	var input2Text = document.createTextNode("ssssssss");
	var input4 = document.createElement("textarea");
	input4.setAttribute("name","Textarea");
	input4.setAttribute("rows",3);
	input4.setAttribute("cols",20);
	//input4.attachEvent("onchange",f);
	input3.appendChild(input2Text);
	td1.appendChild(input1);
	td2.appendChild(input2);
	td3.appendChild(input3);
	td4.appendChild(input4);
	td5.appendChild(input5);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	tb.appendChild(tr);
	document.getElementById("Panel").appendChild(tb);
		
	
}




</script>
</head>


<body  οnlοad="init()">




<!--
  <table id="New_table" border="1">
    <tr><td><input type="button"   οnclick="test()"/></td>
	<td><input type="text"   οnchange="test1()"/></td>
	 <td><span class="STYLE1">ssssssss</span></td>
	 <td><textarea name="TextArea" οnchange="test2(this)" rows="3" cols="20"></textarea></td>
	</tr>
  </table>
  -->
  <div id="Panel">
</div>


</body>
</html>
JasonYao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态生产html元素,js 动态创建 html元素
weixin_28928039的博客
06-07 1369
js 动态创建 html元素js学习之动态创建html元素body{margin:0;padding:0;}.sky{background:#000;width:1000;height:500px; position:relative;}#s{ background:#FFF; width:1px; height:1px; overflow:hidden; position:absolute;}没...
JS动态创建html节点
08-11
1 var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement(""); FF.innerText = 'td'+ i; tt.appendChild(FF); } ...............
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
js动态生成html
懒虫的博客
10-11 3609
1、生成html 动态生成showView <div class="showView"> </div> 异步获取数据： var del_id = ""; function del(e,notice_id) { del_id = notice_id; $(".del_modal_id").val(del_id) $.ajax({ url: "/admin/samproofing/getNotice", type
用js动态生成html页面
热门推荐
qq_33417237的博客
04-04 4万+
首先思路明确：生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。以下就json格式存储的数据，简单示例一下：第一步：获取attribute数据var url = window.android.get...
JS实现动态生成表格并提交表格数据向后端
10-22
在本文中，我们将探讨如何使用JavaScript（JS）动态生成表格，并将表格中的数据提交到后端服务器。动态生成表格是Web开发中常见的需求，特别是在需要用户输入数据并提交给服务器进行处理的场景中。掌握这一技能对于...
JS实现动态生成html table表格的方法分析
10-18
在现代网页设计与开发过程中，动态生成HTML表格是一种常见需求，通过JavaScript可以实现动态地向页面中添加表格，这样可以方便地处理数据展示、统计分析等多种场景。动态生成表格的方法有很多种，本文将详细介绍使用...
JavaScript实现动态生成表格
10-15
这个函数首先获取用户在输入框中输入的行数和列数，然后利用字符串拼接的方法动态构建HTML表格的代码。`str`变量被初始化为空字符串，接着用嵌套的循环结构来生成表格的行和列。外层循环（for(var i = 0; i ; i++)）...
JavaScript动态创建HTML元素
纸上得来终觉浅,绝知此事要躬行
08-26 1807
js动态创建HTML元素
js动态生成添加html
Hello______world的巢
03-28 490
dongtaitianjia.js [code="java"] $(function() { var addKeyAlarmNote = function(){ var node = "" +"共有" +""; $("#box").append($(node)); $("#gs_container").append($(node).show());
用js动态添加html元素,以及属性的简单实例
12-10
用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.style.position='absolute'; lswt_2.style.background='url(
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
通过JS动态创建一个html DOM元素并显示
12-10
近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个元素的位置 @obj 该元素的DOM对象，或该元素的ID */ function getObjec
自动生成html js,js生成html的方法
weixin_42162171的博客
05-31 2267
生成HTML的方法生成HTML的方法实在是太多了，我来讲讲我现在要讲的一个方法，想好一个从头到尾的思路，拿一个新闻系统作为实例．powered by 25175.net假设的两个表：news(ID,title,document,time),news_content(ID,news_id,username,document,time)文件名：我们将news的主键(ID)作为生成.HTML的文件名新建...
js动态创建html元素的方法
三五月儿的专栏
01-15 1万+
js动态创建html元素需要使用到下面这些常见的js方法。 getElementById();//返回带有指定 ID 的元素。 getElementsByTagName();//返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName();//返回包含带有指定类名的所有元素的节点列表。 appendChild();//把新的子节点添加到指
JavaScript动态生成HTML元素
LaoYe的博客
05-04 5442
动态添加HTML元素可以使用createElement（）方法创建一个指定的HTML元素 语法：var Obj = document.createElement（LabelName） 参数说明：   Obj：用来接收添加后返回的HTML元素标签，方便后续操作。 LabelName：指定创建的HTML标签名   创建子节点可以使用appendChild（）方法将新建节点和其他节点绑定子父...
[HTML]JS添加表格
weixin_33881050的博客
07-18 125
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;上课安排&lt;/title&gt; &lt;style type="text/css"&gt;
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、付费专栏及课程。

余额充值