<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<style>
#tab {
border:1px solid #aaa;
border-collapse:collapse;
width:80%;
}
#tab th{
border:1px solid #aaaaaa;
background:#ECE9D8;
border-collapse:collapse;
padding:5px;
text-align:left;
}
#tab td{
border:1px solid #d8d8d8;
border-collapse:collapse;
padding:5px;
}
.txt{
border:1px solid #888;
background:#ECE9D8;
}
.checkBg{
border:1px solid #aaaaaa;
background:#ECE9D8;
}
.checkTxt{
border:1px solid #aaa;
background:##d8d8d8;
}
.button {
border:1px solid #888;margin:5px 0px;
width:80px;background:#ECE9D8;height:22px;line-height:22px;
}
</style>
<script language="javascript" type="text/javascript">
/*
author:kevin
email:kevin_218@163.com
msn:xiao-kevin@hotmail.com
website:http://www.bluekevin.com
*/
function $(id) {return document.getElementById(id);}
function $F(name){return document.getElementsByTagName(name);}
function add(){
var otr = document.getElementById("tab").insertRow(-1);
var checkTd=document.createElement("td");
checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
var otd1 = document.createElement("td");
otd1.innerHTML = '<input type="text" class="txt" name="infoName_txt" id="infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
var otd2 = document.createElement("td");
otd2.innerHTML = '<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
otr.appendChild(checkTd);
otr.appendChild(otd1);
otr.appendChild(otd2);
}
function ccolor()
{
var c1 = document.getElementsByName('checkItem');
for(var i=0; i<c1.length; i++)
if(c1[i].checked)
{
c1[i].parentNode.parentNode.className="checkBg";
c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
}
else { c1[i].parentNode.parentNode.className="";
c1[i].parentNode.nextSibling.firstChild.className="";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
function del(){
var c = document.getElementsByName('checkItem');
var idArray = new Array();
for(var i=0; i<c.length; i++)
if(c[i].checked)
idArray.push(i);
var rowIndex;
var nextDiff =0;
for(j=0;j< idArray.length;j++)
{
rowIndex = idArray[j]+1-nextDiff++;
document.getElementById("tab").deleteRow(rowIndex);
}
}
function save(){
var postString = $("postString");
var checkboxs = document.getElementsByName("checkItem");
var ttab = document.getElementsByName("infoName_txt");
var tt2 = document.getElementsByName("infoValue_txt");
var idArray = new Array();
for(i=0;i<checkboxs.length;i++)
{
idArray.push(ttab[i].value + "|" + tt2[i].value);
}
postString.value = idArray.join("-");
alert(postString.value);
}
function alldell()
{
var des =document.getElementsByName('checkItem');
for(var i=0;i<des.length;i++)
{
if(des[i].checked=document.getElementById('delall').checked){
des[i].parentNode.parentNode.className="checkBg";
des[i].parentNode.nextSibling.firstChild.className="checkTxt";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
else{ des[i].parentNode.parentNode.className="";
des[i].parentNode.nextSibling.firstChild.className="";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
}
</script>
</head>
<body>
<input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();" value="add" />
<input name="del_btn" id="del_btn" type="button" class="button" onClick="del();" value="del" />
<input name="save" id="save" type="button" class="button" onClick="save();" value="save" /><br>
<table id="tab" >
<tr>
<th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td>
<th width="40%">Name</td>
<th width="55%">value</td>
</tr>
</table>
<p>
<input type="text" name="postString" id="postString">
</p>
</body>
</html>
分享到:
相关推荐
javascript动态添加表格数据行 ...本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子。 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript
利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。
table动态添加行并进行行数据编辑,数据修改等操作,动态操作table
非常不多说了,直接给大家贴代码了,具体代码如下所示: <!...<... <head>...meta charset="UTF-8" />...meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,...
动态添加/删除表格行并实现前后台的互动,用最基础的c#和js知识实现,可以作为新手参考。
spreadjs_动态添加表头及数据绑定-demo
本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子。
本文给大家分享使用原生javascript实现动态向表格中添加数据的方法,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
主要包括各种js技术:如动态添加行、删除行、2,3,4多级联动 正则表达式 父窗口弹出子窗口, 数据校验等
javascript为下拉列表添加数据项.html 代码如下: <!... <head>...为下拉列表动态添加数据项</title> [removed] function gel(id) { return document.getElementById(id); } [removed]
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
NULL 博文链接:https://mousepc.iteye.com/blog/969497
本文实例讲述了JS实现向表格中动态添加行的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> ...
首先,动态添加表格是要在前台实现的,当然后台也可以,不过可能要用到ajax,很麻烦,所以最好采用javascript来实现,下面来介绍动态添加表格行的两种方式: 第一种:源码 [removed] <script type=text/java
asp+access 添加数据 删除数据 源码
主要介绍了JavaScript动态添加数据到表单并提交,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1:纯前端 2:导出Excel 3:动态添加数据
jQuery表格添加行数据代码是一款可以在行内添加编辑删除的表格代码。