精华内容
下载资源
问答
  • HTML页面创建动态表格JavaScript和jQuery

    千次阅读 2018-05-22 15:52:36
    只用HTML创建静态表格好说,遇到不确定长度表格的时候就不行了,这里分别给出JavaScript和jQuery两种创建动态表格的方法,本质是一样的 方法 JavaScript方法 <!DOCTYPE html> <...

    前言

    只用HTML创建静态表格好说,遇到不确定长度表格的时候就不行了,这里分别给出JavaScript和jQuery两种创建动态表格的方法,本质是一样的

    方法

    1. JavaScript方法
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格JavaScript</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <div><button id="confirm">确定</button></div>
        <div>
            <table>
                <thead>
                    <th>th1</th>
                    <th>th2</th>
                    <th>th3</th>
                    <th>th4</th>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
        </div>
    </body>
    <script>
    $(document).ready(function () {
        $("#confirm").click(function () {
            $("#tbody").empty();  // 清空子元素
            for(var i=0; i<10; i++) {  // 循环次数根据需求更改
                var tr = document.createElement("tr"),
                    td1 = document.createElement("td"),
                    td2 = document.createElement("td"),
                    td3 = document.createElement("td"),
                    td4 = document.createElement("td");
                td1.innerHTML = "数据1";  // 数据根据需求修改
                td2.innerHTML = "数据2";
                td3.innerHTML = "数据3";
                td4.innerHTML = "数据4";
    
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                tr.appendChild(td4);
    
                var tbody = document.getElementById("tbody");
                tbody.appendChild(tr);  // 插入子元素
            }
        })
    })
    </script>
    </html>

    2.jQuery方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态表格jQuery</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
    <div><button id="confirm">确定</button></div>
    <div>
        <table>
            <thead>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </div>
    </body>
    <script>
    $(document).ready(function () {
        $("#confirm").click(function () {
            for(var i=0; i<10; i++) {  // 循环次数根据需求更改
                var td1 = $("<td></td>").text("data1"),  // 数据根据需求修改
                    td2 = $("<td></td>").text("data2"),
                    td3 = $("<td></td>").text("data3"),
                    td4 = $("<td></td>").text("data4");
                var tr = $("<tr></tr>").append(td1, td2, td3, td4);
                $("#tbody").append(tr);
            }
        })
    });
    </script>
    </html>
    展开全文
  • javaScript 表格动态添加与修改

    多人点赞 热门讨论 2020-08-13 21:06:28
    JavaScript 表格动态添加与修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { ...

    JavaScript 表格的动态添加与修改

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    
    		<style type="text/css">
    			
    			
    			
    			table {
    				text-align: center;
    				margin: 300px auto;
    			}
    			
    			input{
    				width: 30px;
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    
    
    
    
    		<script type="text/javascript">
    			// 1.创建表格
    			var table = document.createElement('table')
    			table.border = 1;
    			table.rules = 'all';
    			table.width = 300;
    
    			// 2.创建标题行
    			var title_Row = table.insertRow();
    			for (var i of '编号,名称,单价,数量,总价,操作'.split(',')) {
    				title_Row.insertCell().innerText = i
    			}
    
    
    			// 3. 创建内容行
    			var default_Row = table.insertRow();
    
    			default_Row.insertCell().innerText =1;
    			default_Row.insertCell().innerHTML ='<span>苹果</span><input type="text" value="苹果" ></input>';
    			default_Row.insertCell().innerHTML ='<span>1</span><input type="text" value="1" ></input>';
    			default_Row.insertCell().innerHTML ='<span>1</span><input type="text" value="1" ></input>';
    			default_Row.insertCell().innerHTML =1;
    			
    			//创建默认 按钮
    			var deleteBtn = document.createElement("button");
    			deleteBtn.innerText = '删除';
    			deleteBtn.onclick=function(){
    				this.parentElement.parentElement.remove()
    				
    				//从新排序号
    				re_order()
    			}
    			
    			var editBtn = document.createElement("button");
    			editBtn.innerText = '修改';
    			//修改事件
    			editBtn.onclick=function(e){
    	
    						if(e.target.innerText=='修改'){
    							e.target.innerText='确认修改';
    							
    							// 显示 输入框
    							// 隐藏 文本
    							let temp = e.target.parentElement.parentElement;
    							
    							for(let i=1;i<4;i++){
    								temp.cells[i].querySelector('span').style.display='none'
    								temp.cells[i].querySelector('input').style.display='block'
    							
    							}
    
    						}
    						else{
    							e.target.innerText='修改';
    							
    							let temp = e.target.parentElement.parentElement;
    							//更改数据
    							// 隐藏 输入框
    							// 显示 文本
    							for(let i=1;i<4;i++){
    								temp.cells[i].querySelector('span').innerText =temp.cells[i].querySelector('input').value;
    								
    								temp.cells[i].querySelector('span').style.display='block'
    								temp.cells[i].querySelector('input').style.display='none'
    							
    							}
    							
    							// 算总价
    							temp.cells[4].innerText = temp.cells[2].querySelector('span').innerText *temp.cells[3].querySelector('span').innerText
    		
    						}
    	
    				}
    
    			
    
    			default_Row.insertCell().appendChild(deleteBtn)
    			default_Row.cells[5].appendChild(editBtn);
    
    
    
    
    			// 4. 创建增加订单行
    			var add_row = table.insertRow();
    
    			var add_cell = add_row.insertCell();
    			add_cell.colSpan = 6;
    
    			// 增加订单按钮
    			var add_Btn = document.createElement("button");
    			add_Btn.innerText = '增加订单';
    			add_cell.appendChild(add_Btn)
    
    
    
    			// 增加订单 事件:
    			add_Btn.onclick = function() {
    				var x = table.firstElementChild.insertBefore(default_Row.cloneNode(true), this.parentElement.parentElement)
    
    				if(isNaN(x.previousElementSibling.cells[0].innerText)){
    					x.cells[0].innerText = 1;
    				}
    				else{
    					x.cells[0].innerText = 1 + parseInt(x.previousElementSibling.cells[0].innerText)
    					
    				}
    
    				// // 删除按钮 事件
    				x.lastElementChild.firstElementChild.onclick=function(){
    					this.parentElement.parentElement.remove()
    
    					// 从新派序列号
    						re_order()
    				
    				}
    				
    				// 修改按钮添加事件
    				x.lastElementChild.lastElementChild.onclick=function(e){
    	
    						if(e.target.innerText=='修改'){
    							e.target.innerText='确认修改';
    							
    							// 显示 输入框
    							// 隐藏 文本
    							let temp = e.target.parentElement.parentElement;
    							
    							for(let i=1;i<4;i++){
    								temp.cells[i].querySelector('span').style.display='none'
    								temp.cells[i].querySelector('input').style.display='block'
    							
    							}
    
    						}
    						else{
    							e.target.innerText='修改';
    							
    							let temp = e.target.parentElement.parentElement;
    							//更改数据
    							// 隐藏 输入框
    							// 显示 文本
    							for(let i=1;i<4;i++){
    								temp.cells[i].querySelector('span').innerText =temp.cells[i].querySelector('input').value;
    								
    								temp.cells[i].querySelector('span').style.display='block'
    								temp.cells[i].querySelector('input').style.display='none'
    							
    							}
    							
    							// 算总价
    							temp.cells[4].innerText = temp.cells[2].querySelector('span').innerText *temp.cells[3].querySelector('span').innerText
    		
    						}
    	
    				}
    
    			}
    
    			// 【从新 排序号】
    			function re_order(){
    				
    				var  tr_arr = table.querySelectorAll("tr");
    			
    				var temp =[]
    				for(var i=1;i<tr_arr.length-1;i++){
    					temp.push(tr_arr[i])
    				}
    				for(var i=0;i<temp.length;i++){
    					temp[i].cells[0].innerText=i+1;
    				}
    			}
    	
    			// 表格添加到页面
    			document.body.appendChild(table)
    		</script>
    
    	</body>
    </html>
    
    

    javaScript 表格的动态添加与修改

    展开全文
  • HTML+JavaScript动态表格

    2013-07-26 16:04:14
    JavaScript实现的动态表格,双击可以实现不同类型的单元格内容的更改,有增删改的更能,可以上传图片,放大图片显示,日历,JavaScript验证等
  • JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> [removed] function changeContent() { var x=document.getElementById...
  • 要添加属性或要修改属性的元素.setAttribute("属性名","属性值");
  • 这样写为什么不能动态增加一行?我应该怎样修改 <script language="javascript"> function insertRows(){ var tempRow=0; var tbl=document.getElementById("dictTbl"); tempRow=tbl.rows.length; //获取...
  • 使用javascript表格进行动态修改 无标题文档 function addrow(){ var tb = document.getElementById("tab"); var num = tb.rows[0].cells.length; //表格的列的数目 var newrow = tb.insertRow...

    使用javascript对表格进行动态修改

    <!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=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function addrow(){
    	var tb = document.getElementById("tab");
    	var num = tb.rows[0].cells.length;       //表格的列的数目
    	var newrow = tb.insertRow(tb.rows.length);  //插入新行
    	var Cells = newrow.cells;
    	for(var i = 0 ;i<num;i++){
    		var newcell = newrow.insertCell(Cells.length);  //插入新列
    		newcell.align = "center";
    		newcell.innerHTML=tb.rows.length-1;
    		}
    	}
    </script>
    </head>
    <body>
    <input type="button" name="Submit" value="添加" οnclick="addrow();" />
    <table id="tab" width="445" border="1">
      <tr>
        <th width="68" scope="col">编号</th>
        <th width="42" scope="col">姓名</th>
        <th width="67" scope="col">登录名</th>
        <th width="49" scope="col">身份</th>
        <th width="85" scope="col">创建时间</th>
        <th width="94" scope="col">登录时间</th>
      </tr>
    </table>
    </body>
    </html>
    


    展开全文
  • javascript动态操作表格

    2019-04-14 08:29:54
    js动态操作表格(增加、删除、修改) 通过table的insertCell方法用for循环添加行。 通过removeChild的方法删除行。 通过innerHTML 方法修改行 <!DOCTYPE html> <html> <head> <meta ...

    js动态操作表格(增加、删除、修改)

    1. 通过table的insertCell方法用for循环添加行。
    2. 通过removeChild的方法删除行。
    3. 通过innerHTML 方法修改行
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>图书管理平台</title>
    		<style type="text/css">
    			.divInput {
    				float: left;
    				width: 310px;
    				margin-left: 5%;
    				line-height: 200%;
    			}
    		</style>
    		
    	</head>
    	<body>
    		<p align="center">图书管理平台</p>
    		<p align="center">图书入库</p>
    		<div class="divInput">
    			序号:
    			<div style="float: right;">
    				<input type="text" "validation(this)" name="bkno" id="bkno" size="30" />	
    			</div>
    		</div>
    		<div class="divInput">
    			书名:
    			<div style="float: right;">
    				<input type="text" name="bkname" id="bkname" size="30" />
    			</div>
    		</div>
    		<div class="divInput">
    			定价:
    			<div style="float: right;">
    				<input type="text" name="bkprice" id="bkprice" size="30" />
    			</div>
    		</div>
    		<div class="divInput">
    			作者:
    			<div style="float: right;">
    				<input type="text" name="bkauthor" id="bkauthor" size="30" />
    			</div>
    		</div>
    		<div align="center" style="clear: both;padding: 10px;">
    			<input type="button" "addBook()" value="添加图书" />
    		</div>
    		<hr />
    		<table id="table1" width="90%" border="1" align="center" cellpadding="5" cellspacing="1">
    			<caption style="line-height: 30px;">现存图书列表</caption>
    			<tr>
    				<th>序号</th>
    				<th>书名</th>
    				<th>定价</th>
    				<th>作者</th>
    				<th>操作</th>
    			</tr>
    		</table>
    	</body>
    	<script type="text/javascript">
    		function validation(){
    			alert(ths.value);
    		}
    		function addBook(){
    			var values = new Array(4);
    			values[0] = document.getElementById("bkno").value;
    			values[1] = document.getElementById("bkname").value;
    			values[2] = document.getElementById("bkprice").value;
    			values[3] = document.getElementById("bkauthor").value;
    			//创建元素
    			var table = document.getElementById("table1");
    			var newRow = table.insertRow(table.rows.length);
    			newRow.id = values[0];
    			for(var i=0;i<values.length;i++){
    				var cell = newRow.insertCell(i);
    				cell.align = "center";
    				cell.innerHTML = (values[i]);
    			}
    			var cell =newRow.insertCell(4);
    			cell.align = "center";
    			cell.innerHTML = '<a href="#""modifyBook(this)">修改</a>'+
    			'&nbsp;&nbsp;&nbsp;<a href="#" "deleteTr(this)">删除</a>';
    		}
    		function deleteTr(obj){
    			var Row=obj.parentNode;
    			var wenzi=Row.parentNode.firstChild.innerHTML;
    			var r = confirm("您确定删除序号为"+wenzi+"的图书吗?"+Row.tagName.toLowerCase());
    			if(r == true){
    				while(Row.tagName.toLowerCase()!="tr")
    				{
    					Row=Row.parentNode;
    				}
    				Row.parentNode.removeChild(Row); 
    			}
    		}
    		function modifyBook(obj){
    			var values = new Array(4);
    			values[0] = document.getElementById("bkno").value;
    			values[1] = document.getElementById("bkname").value;
    			values[2] = document.getElementById("bkprice").value;
    			values[3] = document.getElementById("bkauthor").value;
    			var Row1=obj.parentNode.parentNode.childNodes;				
    			for(var i=0;i<values.length;i++){
    				Row1[i].innerHTML = values[i];
    			}
    			
    			Row1[4].innerHTML = '<a href="#""modifyBook(this)">修改</a>'+
    			'&nbsp;&nbsp;&nbsp;<a href="#" "deleteTr(this)">删除</a>';
    			
    		}
    	</script>
    </html>
    
    展开全文
  • getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)...setAttribute() 把指定属性设置或修改为指定的值。
  • 另外,进来看Ajax的书,经常有通过JS动态修改DOM改变页面的方法,就乘机与表格的鼠标事件连在一起,弄了点东西出来,以后也可作为参考。代码如下,附有简单注释:...
  • javascript 动态生成表格

    千次阅读 2009-08-10 09:55:00
    动态生成表格 title > head > < body > < form id = "form1" name = "form1" >   < table id = "oTable" >   < tbody id = "oTBody" >   tbody >   table >   < SCRIPT ...
  • 使用JavaScript动态插入表格和数据 一、创建HTML布置好基本格局 这里没有什么难点,基本HTML知识 为了简单实现没有使用thead和tbody进行设计 <html> <head> <meta charset="UTF-8"> <title...
  • 本文详细介绍Javascript动态生成表格的性能调优  客户端动态输出table数据展示表格,是web应用中较为常见的工作。对于循环打印输出tr,td本身是一件非常僵硬和暴力的编程办法,再加上最后绑定元素...
  • javascript实现动态表格的换行变色

    千次阅读 2013-10-08 01:16:49
    2.新建一个css文件table.css在里面加入下列代码 @CHARSET "UTF-8"; /*自动换行变色第一行的颜色*/ tr.even td {  background: #f8fbfc; /*#DFE7F2*/ } /*自动换行变色第二行的颜色*/ tr.odd...
  • javascript动态添加删除表格数据管理

    千次阅读 2011-08-12 10:01:16
    本文和大家分享一下使用javascript动态添加删除表格数据管理,主要实现功能如下: 点击添加按钮可以添加一个空的可以修改的记录。 点击表格单元格可以修改文本。 修改后实现了保存的接口。 如果添加了新的...
  • 使用JavaScript和DOM动态创建表格

    千次阅读 2007-02-01 15:37:00
    使用JavaScript和DOM动态创建表格
  • 主要介绍了javascript修改表格背景色实例,代码简单,大家参考使用吧
  • NULL 博文链接:https://1148130696.iteye.com/blog/1726191
  • JavaScript动态添加删除表格

    千次阅读 2006-03-31 11:26:00
    昨天同学问到JSP中动态添加一组输入框怎么实现,我想JSP或ASP以及CGI等可用于WEB编程的都不外乎两种方法实现,一种是...我想用一个动态添加删除表格行的JS例子稍微修改一下就可以实现所要的结果,修改后的代码如下: 
  • javaScript修改表格内容

    2009-06-11 18:16:22
    javascript"&gt;function changetd(r,d,c){//r:行//d:列//c:修改内容document.getElementById("table1").rows(r).cells(d).innerHTML = c; }&lt;/script&gt;         调用:&...
  • 如何更改表格中只有一行的颜色(HTML/JavaScript)在此之后数据是由用户填充“萨姆”栏应在自动填写这是价格乘以计数。我已经完成了程序,直到这里。 但是我有一个问题的延续问题:我应该改变颜色具有最高金额到BLUE ...
  • JavaScript学习(二十二)—动态创建表格 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • 使用JavaScript和DOM动态创建表格 2007-03-19 22:43:35 http://blog.chinaunix.net/uid-7737289-id-176828.html 分类: Java 作者:biyao 日期:2006-08-12 简介  这篇文章简单介绍了DOM 1.0一些基本...
  • javascript使用Style对象属性可以动态的改变文本的样式,Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style对象。使用Style对象属性的语法:document.getElementById("id").style.property="值...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 82,643
精华内容 33,057
关键字:

动态表格javascript并修改

java 订阅