<html>
<script language="JavaScript">
var i=0;//行的id
var num;
var tdname;
var unit;
var list= new Array();
var numList=new Array();
var flag=true;
function addRow(){//添加行
var table=document.getElementById("table");
var length=table.rows.length;
var tr=document.createElement("tr");
tr.id=++i;
var td0=document.createElement("td");
td0.innerHTML="<input type=\"text\" value=\""+num+"\"/>";//不用文本框下面取不出来。 (因遍历的方式需要不带文本框)
tr.appendChild(td0);
var td1=document.createElement("td");
tdname="第"+i+"行 "+tdname;
td1.innerHTML="<input type=\"text\" value=\""+tdname+"\" name=\"name\" id=\"name\"/>";
tr.appendChild(td1);
var td2=document.createElement("td");
td2.innerHTML="<input type=\"text\" value=\""+unit+"\" name=\"unit\"/>";
tr.appendChild(td2);
var td3=document.createElement("td");
//td3.id=tr.id;
td3.innerHTML="<input type=\"button\" value=\"del\" onclick=\"del(this.parentElement.parentElement,this.parentElement.parentElement.id)\"/>";
tr.appendChild(td3);
addData(i);//含数据验证
if(flag==true){
document.getElementById("newbody").appendChild (tr);
}else{
i--;
}
}
function del(src,index){
var tr=document.getElementById(index);
tr.parentNode.removeChild(tr);
delData(index);
}
function addData(rid){
flag=true;
for(var i=0;i<=numList.length;i++){
if(num==numList[i]){
flag=false;
alert("该名称您已经添加!请查看已添加的列表。");
}
}
if(flag==true){
numList[numList.length]=num;
var str="{"+num+","+tdname+","+unit+"}";
list[rid]=str;
}
}
function delData(rid){ list[rid]=""; }
function getList(){
var jsonStr="{check:[";
var showStr="{ID 名称 单位}<br>"
var s="";
for(var i=0;i<=list.length;i++){
s=list[i];
if(s!=""){
if(s!=undefined){
jsonStr+=list[i]+",";
showStr+=list[i]+"<br>";
}
}
}
jsonStr=jsonStr.substring(0,jsonStr.length-1);
jsonStr+="]}";
//alert("结果:"+jsonStr);
var contain=document.getElementById("div1");
contain.innerHTML=jsonStr+"<br>"+showStr;
}
function getTable(){
var tableObj = document.getElementById("table");
//alert(tableObj.rows.length+"/"+tableObj.rows[0].cells.length+"/"+tableObj.rows[0].cells[0].children.length);
//alert(tableObj.rows[1].cells[0].children[0].value);
var str = "<table border=\"1\"><tr><td>ID</td><td>名称</td><td>单位</td></tr>";
for(var i=0;i<tableObj.rows.length;i++){//行
str+="<tr>";
for(var j=0;j<tableObj.rows[i].cells.length-1;j++){//列
for(var z=0;z<tableObj.rows[i].cells[j].children.length;z++){
var text = tableObj.rows[i].cells[j].children[z];//取得text object
str +="<td>"+text.value+"</td>";
}
} str+="</tr>";
}
str+="</table>";
//alert(str);
var contain=document.getElementById("div2");
contain.innerHTML=str;
// var ob=document.getElementById("tb2").getElementsByTagName("input");
// for(var j=0;j<ob.length;j++)
// {
// if(ob[j].type=="text")
// {
// jx+=j;
// }
//}
}
function set(){ //该方法有问题。
var a="";
//alert(document.getElementById(name));
alert(document.find.name.length);
for(var i=0;i<document.find.name.length;i++){
a+=document.find.name[i].value;
a=a+":"+document.find.unit[i].value+"/";
}
//window.opener.document.getElementById("unit").value=uu;
alert("打印结果:"+a);
//window.close();
}
</script>
<BODY>
<form method="post" action="" name="find">
<table id="table" border="1">
<tr><td>ID</td><td>名称</td><td>单位</td> <td>删除</td> </tr>
<tbody id="newbody"></tbody>
</table>
</form>
<input type="button" onClick="getList()" value="getList"/>
<input type="button" onClick="getTable()" value="getTable"/>
<div id="div1"></div>
<div id="div2"></div>
<table border="1" id="t1">
<tr > <td>数据项</td> </tr>
<tr onMouseDown="
num=this.cells.item(0).innerHTML;
tdname=this.cells.item(1).innerHTML;
unit=this.cells.item(2).innerHTML;" >
<td>1</td><td>name1</td><td>unit1</td>
<td><input type="button" onClick="addRow()" value="addRow"/></td> </tr>
<tr onMouseDown="
num=this.cells.item(0).innerHTML;
tdname=this.cells.item(1).innerHTML;
unit=this.cells.item(2).innerHTML;" >
<td>2</td><td>name2</td><td>unit2</td>
<td><input type="button" onClick="addRow()" value="addRow"/></td> </tr>
</table>
</BODY>
</html>
分享到:
相关推荐
javascript 操作 table的一个例子. 可以下去研究下
javascript 操作 Table 排序!
使用javascript脚本向页面中的table添加和删除行
JavaScript操作select JavaScript操作table
javascript 操作table的特性.docx
用于b/s前端表格数据排序的方法,使用javascript 操作table,可以选择对表格中任一部分进行排序的说
对表格的行和列进行插入/删除,并对每行添加行号
NULL 博文链接:https://zhouhaitao.iteye.com/blog/1152968
javascript操作table的特性 hello Cell 1,1 Cell 2,1 Cell 1,2 Cell 2,2 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]可以直接点击页面的任何部分即可看到效果。
复制代码代码如下: <table cellSpacing=”0″ cellPadding=”0″ border=’1′ bordercolor=”black” xss=removed></table> 很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。解决...
介绍了JavaScript操作table,可以新增行和列并且隔一行换背景色代码,有需要的朋友可以参考一下
最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...
使用javascript实现table动态增加删除行列。
主要介绍了javascript清空table表格的方法,涉及javascript操作table表格的技巧,需要的朋友可以参考下
JavaScript动态操作表格,添加,删除行、列及单元格
javascript 生成表格、合并等操作
对table的动态操作
项目上有一个表格需要实现在线编辑,开始用了 element 的el-table 实现,单元格内基础情况就是监听了单击单元格切换一个span标签与input标签,复杂点的单元格使用了大量的条件判断来实现对应的编辑操作,比如下拉...
主要介绍了javascript实现table选中的行以指定颜色高亮显示的方法,实例分析了javascript操作table表格元素与相关样式的技巧,需要的朋友可以参考下