js添加行删除行,遍历table
文章分类:Web前端
//需求:js实现多条记录的更新
//1、从页面的表格A中,选择商品添加到表格B中,
//2、表格B中,对应每条商品,输入数量。
//3、表格B中的商品不能重复,可以删除。
//4、能同时传入后台,更新到数据库
//5、或传入其他页面,并显示出来。
//js通过添加表的一行,删除一行。遍历表结构等方法实现
//可修改为其他功能:
//多条记录同时修改并且更新到数据库
Html代码
<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>";
}
}
}
jsonStrjsonStr=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;
aa=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>
<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>
分享到:
相关推荐
在FreeMarker中,遍历`List<Map<String>>`是常见的操作,尤其在处理从后端传来的复杂数据结构时。这篇博客链接虽然无法直接访问,但从标题来看,我们可以推测其内容可能涉及如何在FreeMarker模板中遍历一个包含Map...
<table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <!-- 表格数据行 --> </tbody> </table> ``` 3. **编写jQuery代码**:利用jQuery选择器选取表格...
<li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接...
实际应用中,你可能需要根据具体的业务逻辑调整这些示例,比如通过循环遍历所有行,或者根据特定条件(如用户点击某行的删除按钮)来添加或删除行。在`删除行.html`和`添加行.html`文件中,你应该能找到更详细的实现...
可以通过2种方法遍历HashMap<br><br>Map map = new HashMap();<br><br>for (Iterator iter = map.entrySet().iterator(); iter.hasNext();) {<br><br> Map.Entry entry = (Map.Entry) iter.next();<br><br> Object ...
<tr><th> </th><th> </th><th> </th><th> </th></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> </table> 而在JS中如何遍历赋值呢...
相反,显示的数据表格行和列不确定,此时用实体类(UserEntity)迭代的方式很难实现,只能用List<String>或List<List<String>>实现了。 运行效果及代码解释请参考我的博客园:...
1. **条件判断**:在遍历过程中,可以结合`<#if>`或`<#switch>`进行条件判断,例如跳过某些特定的元素。 ```freemarker <#list users as user> <#if user.isAdmin> <b>管理员: ${user.name}</b> </#if> </#...
JavaScript遍历table的行和列 JavaScript遍历table的行和列
js 实现 JavaScript遍历table的行和列! 值得下载看看!资源免费,大家分享!!
与ArrayList相比,List<T>在添加和删除元素时的性能通常更好,因为不需要进行类型转换。遍历List<T>的时间复杂度与ArrayList相同,都是O(n),但由于类型安全,List<T>通常被视为更优的选择。 最后,`DataSet`是.NET...
在网页开发中,表格(Table)是展示数据的常用元素,而JavaScript(js)则提供了强大的功能来操作DOM(文档对象模型),包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行,...
<title>jQuery动态添加删除行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</...
<FileSystem> < DriverC > <Dir DirName=”MSDOS622”> <File FileName =” Command.com” ></File> </Dir> <File FileName =”MSDOS.SYS” ></File> <File FileName =” IO.SYS” ></File> </DriverC> < ...
"<table><thead><tr><th>列1</th><th>列2</th></th></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody></table>" ); ``` 如果你已经有一些数据存储在数组中,可以遍历数组并使用`append()`逐行添加...
一个简单的表格由 `<table>` 开始,包含多个 `<tr>`(行)元素,每个行中又有若干个 `<td>`(单元格)元素。为了实现排序,我们需要为表格的表头(`<th>`)添加点击事件监听器,以便在用户点击时触发排序操作。 ...
var newRow = $("<tr><td>" + data1 + "</td><td>" + data2 + "</td><td><button class='deleteRow'>删除</button></td></tr>"); return newRow; } ``` 并设置删除行的事件监听: ```javascript $(".deleteRow")....
<td><div><a href="#">[删除]</a></div></td> <td><div><a href="#">[二级]</a></div></td> </tr> <!-- 更多行... --> </table> ``` 在这个例子中,表格的每一行都有一个文本输入框,用于用户编辑数据。当用户...
<br>2、实现连通和非连通的无向图的深度优先和广度优先遍历;<br>3、要求利用栈实现无向图的深度优先遍历;<br>4、以用户指定的结点为起点,分别输出每种遍历下的结点访问序列和生成树的边集;<br>5、用凹入表打印...
在JavaScript中,动态生成table是一种常见的网页交互功能,它允许我们根据需求在页面上实时创建、添加或删除表格行(tr)和单元格(td)。这个功能在数据展示、表格编辑或者用户交互丰富的应用场景中非常实用。下面...