JS动态添加表格 一

利用document.createElement(),  appendChild()方法可以动态创建和添加表格

<!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>
</head>
<script type="text/javascript">
    var index = 3;    //行数
	var number = 4;   //序号
	var oTR = new Array();  //创建一个TR数组
    function add(){
	   index = index+1;
	   oTR[index] = document.createElement("tr");   //TR
	   var oTD = document.createElement("<td>");    //创建TD
	   oTD.innerHTML = number++;
	   oTR[index].appendChild(oTD);   //添加TR的子元素TD

	   oTD = document.createElement("<td> </td>")
	   oTR[index].appendChild(oTD);

	   oTD = document.createElement("<td> </td>")
	   oTR[index].appendChild(oTD);

	   oTD = document.createElement("<td> </td>")
	   oTR[index].appendChild(oTD);

	   oTD = document.createElement("<td> </td>")
	   oTR[index].appendChild(oTD);

	   document.getElementById("mytbody").appendChild(oTR[index]);  //将TR添加到tbody中
	}
</script>
<body>
<table border="1" width="40%" align="center">
    <tr>
	    <th>序号</th><th>询价内容</th><th>数量</th><th>单位</th><th>单价(元)</th>
	</tr>
	<tbody id="mytbody">
	    <tr>
		   <td>1</td><td> </td><td> </td><td> </td><td> </td>
		</tr>
		<tr>
		  <td>2</td> <td> </td><td> </td><td> </td><td> </td>
		</tr>
		<tr>
		  <td>3</td> <td> </td><td> </td><td> </td><td> </td>
		</tr>
	</tbody>
	<tr>
	     <td colspan="4"> </td><td align="right"><a href="javascript:add()">+增加</a></td>
	</tr>
</table>
</body>
</html>

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

原文地址:https://www.cnblogs.com/skiwnchqhh/p/10339028.html

时间: 01-30

JS动态添加表格 一的相关文章

Js动态添加复选框Checkbox的实例方法!!!

首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement("input"); checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("id",'123456'); 但是,这样产生的checkbox是不带尾后的文字的,如果需要添加,那么需要使用 document.createTe

javascript动态添加表格以及获取数据

<script type="text/javascript"> var dict = { '百度': 'http://wwww.baidu.com', '新浪': 'http://www.sina.com', '谷歌':'http://www.google.com' } window.onload = function () { //注册点击事件 document.getElementById('btn1').onclick = function () { //动态创建表格

js jquery 动态添加表格

for循环将你要添加的标签写上,然后直接var talbeAdd=""for(){ tableAdd+="<tr><td>这儿写你要添加的内容</td></tr>"; }$("table").append("这个写你要添加的标签");你想通过什么事件添加自己写

js动态创建表格方法

1 window.onload = function(){ 2 var table = document.createElement('table'); 3 table.border = 1; 4 table.width = '100%'; 5 var tbody = document.createElement('tbody'); 6 table.appendChild(tbody); 7 //主角登场了 insertRow; 作用是向指定位置插入一行 rows返回表格的所有行 cells返回

js动态添加文件上传框

页面元素添加为 <tr id="att" style="display:none;"> <td style="text-align:right;">附件文件:</td> <td> <div id="div_fujian"> <div class="input-outer"><input type="file"

js动态添加table 数据tr td

成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table      概要代码如下: Jsp页面[javascript]//动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){     

JS动态添加行列

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add-Delete Row.aspx.cs" Inherits="Add_Delete_Row" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

js动态添加菜单

<script type="text/javascript">window.onload = initForm; function initForm() { document.getElementById("months").selectedIndex = 0; document.getElementById("months").onchange = populateDays; } function populateDays() {

jQuery对 动态添加 的元素 绑定事件(on()的用法)

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 });  但是对用js动态添加的元素 是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

通过js动态生成文本框,怎么把文本框中的值传到java后台?

通过js动态生成文本框,怎么把文本框中的值传到java后台? 1 var lengths; 2 function insertrow2() //增加的一行方法2 3 { 4 newRow=document.all.yltable.insertRow(-1); 5 lengths = document.all.yltable.rows.length; 6 7 newcell=newRow.insertCell() ; 8 newRow.bgColor='#FFFFFF'; 9 newcell.al