现在有个问题需要各位大侠帮忙解决下：说明下本人结贴率100%,从不欠分的.... js实现增行和删行，内容就是div中部分。实现：1.点击”增加“ 页面又出现一个div内容和所示相同
2.点击“删除”页面会删除本div部分（是本div部分）；
3.页面最少留着一个所示div中内容。
div内容
<table id="table_b" border="2">
<tbody id="tbody_b">
<tr>
<div>
<tr>
<td>
物料名称:
</td>
<td>
<input type="text" name="wuliao" id="wuliao"/>
</td>
<td></td>
</tr>
<tr>
<td>
计量单位:
</td>
<td>
<select id="select_b" name="select_b">
<option value="TAI">台</option>
<option value="BU">部</option>
<option value="LIANG">辆</option>
</select>
<input type="text" name="text_j" id="text_j"/>
</td>
<td></td>
</tr>
<tr>
<td>
描述:
</td>
<td>
<textarea name="textArea" id="textArea"></textarea>
</td>
<td>
<a href="#" onclick="delet(this.parentNode.parentNode.parentNode)">删除</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="add()">添加</a>
</td>
</tr>
</div>
</tr>
</tbody>
</table>希望各位大侠帮忙，本人会尽快结贴！！！
2.点击“删除”页面会删除本div部分（是本div部分）；
3.页面最少留着一个所示div中内容。
div内容
<table id="table_b" border="2">
<tbody id="tbody_b">
<tr>
<div>
<tr>
<td>
物料名称:
</td>
<td>
<input type="text" name="wuliao" id="wuliao"/>
</td>
<td></td>
</tr>
<tr>
<td>
计量单位:
</td>
<td>
<select id="select_b" name="select_b">
<option value="TAI">台</option>
<option value="BU">部</option>
<option value="LIANG">辆</option>
</select>
<input type="text" name="text_j" id="text_j"/>
</td>
<td></td>
</tr>
<tr>
<td>
描述:
</td>
<td>
<textarea name="textArea" id="textArea"></textarea>
</td>
<td>
<a href="#" onclick="delet(this.parentNode.parentNode.parentNode)">删除</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="add()">添加</a>
</td>
</tr>
</div>
</tr>
</tbody>
</table>希望各位大侠帮忙，本人会尽快结贴！！！
function GetID(chkname)
{
var chk_ID = window.document.getElementsByName(chkname);
var id = "";
for(var i =0;i<chk_ID.length;i++)
{
if (chk_ID[i].checked)
{
id += chk_ID[i].value + "|";
}
}
if (id == "")
{
alert("请选择要删除的项！");
return 0;
}
else
{
id = id.substring(0,id.length-1);
//alert("-"+id+"-");
window.location.href = "gogogo.aspx?ID=" + id;
}}
</script>然后到传值的页面把id获取下来 然后做处理
<!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" language="javascript"> //===============================================================
function add(){
var htmlT ="<div>"
+"<tr>"
+"<td>物料名称:</td>"
+"<td><input type='text' name='wuliao'></td>"
+"<td></td>"
+"</tr>"
+"<tr>"
+"<td>计量单位</td>"
+"<td><select name='jiliang'>"
+"<option value='TAI'>台</option>"
+"<option value='BU'>部</option>"
+"<option value='LIANG'>辆</option>"
+"</select></td>"
+"<td><input type='text' name='jiliinag_text'></td>"
+"</tr>"
+"<tr>"
+"<td>描述:</td>"
+"<td><textarea name='textarea_mioashu'></textarea></td>"
+"<td><a href='#' onclick='del(this.parentNode.parentNode.parentNode)'>删除</a></td>"
+"</tr>"
+"<tr>"
+"<td><a href='#' onclick='add()'>添加</a></td>"
+"<td></td>"
+"<td></td>"
+"</tr>"
+"</div>";
//取得整个对象
var root=document.getElementById("tbody_b");
//取出对象中的<tr>
// var allRows = root.getElementsByTagName('tr');
var newRow = root.insertRow();
var newCell0 = newRow.insertCell();
newCell0.innerHTML=htmlT;
}
function del(_this){
var root = _this.parentNode;
root.deleteRow(_this);
}
</script>
</head><body><table id="table_b" border="2">
<tbody id="tbody_b">
<tr>
<div>
<tr>
<td>
物料名称:
</td>
<td>
<input type="text" name="wuliao" id="wuliao"/>
</td>
<td></td>
</tr>
<tr>
<td>
计量单位:
</td>
<td>
<select id="select_b" name="select_b">
<option value="TAI">台</option>
<option value="BU">部</option>
<option value="LIANG">辆</option>
</select>
<input type="text" name="text_j" id="text_j"/>
</td>
<td></td>
</tr>
<tr>
<td>
描述:
</td>
<td>
<textarea name="textArea" id="textArea"></textarea>
</td>
<td>
<a href="#" onclick="delet(this.parentNode.parentNode.parentNode)">删除</a>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="add()">添加</a>
</td>
</tr>
</div>
</tr>
</tbody>
</table>
</body>
</html>
<body>
<div id="div1" style="width:700px;margin:10px auto;">
<input type="button" value="添加" onclick="addu();" />
<table id="T_model">
<table>
<div id="info" style="width:300px"> 总金额：￥0.00</div>
<input id="SubTT" type="button" value="提交" onclick="btnOK();"/>
</div>
</body>
<script type="text/javascript" src="jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2555620/sign.js" defer="defer"></script>
<script type="text/javascript">
var g=document.getElementById;
function addu() {
var tb=g("T_model");
var tr=tb.insertRow(tb.rows.length);//添加行
var lasttd=tr.insertCell(tr.cells.length);//插入删除那个单元格,现在要想放下面就把这两行移到for后面就行了
lasttd.innerHTML="<input type='button' onclick='btndel(this)' value='Delete'/>";
var start=tr.cells.length,end=start+4;
for(var i=start;i<end;i++) {
var td=tr.insertCell(i);//添加单元格
if(i==3 || i==4)
td.innerHTML="<input type='text' onkeyup='calc(this)'/>";
else
td.innerHTML="<input type='text'/>";
}
}
function btnOK() {
var aa="";
$("#T_model input[type='text']").each(function(){ //只取type='text'的,这里为了偷懒就使用jquery来遍历了
aa+=$(this).val()+"|";
})
alert(aa)
}
function btndel(obj) {
var tr=obj.parentNode.parentNode;//获取 当前行
var tb=tr.parentNode.parentNode;
tr.parentNode.removeChild(tr);
if(tb.rows.length>0) {
calc(tb.rows[0].cells[3].firstChild);
}
}
var calc=function(obj) {
var tb=obj.parentNode.parentNode.parentNode.parentNode;
var total=0;
for(var i=0;i<tb.rows.length;i++) {
var txt1=tb.rows[i].cells[3].firstChild.value;
var txt2=tb.rows[i].cells[4].firstChild.value;
if(txt1!='' && !isNaN(txt1) && txt2!='' &&!isNaN(txt2)){
total+=parseFloat(txt1) * parseFloat(txt2);
}
}
g("info").innerHTML="总金额：￥"+total.toFixed(2);
};
function myfilter(e) {
var obj=e.srcElement || e.target;
var dot=obj.value.indexOf(".");//alert(e.which);
var key=e.keyCode|| e.which;
if(key==8 || key==9 || key==46 || (key>=37 && key<=40))//这里为了兼容Firefox的backspace,tab,del,方向键
return true;
if (key<=57 && key>=48) { //数字
if(dot==-1)//没有小数点
return true;
else if(obj.value.length<=dot+2)//两位小数
return true;
} else if((key==46) && dot==-1){//小数点
return true;
}
return false;
}
</script>
</html>
$("#add").click(function(){
$("#tbody_b").append("<tr class='test' style='float:left; boder:1'>"
+"<div>"
+"<tr>1111</tr>"
+"<tr>2222</tr>"
+"<tr>3333</tr>"
+"</div>"
+"</tr>");
});自己来整理css的布局问题
divObj.setAttribute('id', newDivID);
divObj.getElementsByTagName('table')[0].setAttribute('id', newTableID);
divObj.parentNode.appendChild(newObj);
var newObj = divObj.clone(true);
newObj.setAttribute('id', newDivID);
newObj.getElementsByTagName('table')[0].setAttribute('id', newTableID);
divObj.parentNode.appendChild(newObj);
<!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 delDiv(btn){
var div = document.getElementById("div");
var table = btn.parentNode.parentNode.parentNode.parentNode;
if(div.getElementsByTagName("table").length > 1){
div.removeChild(table);
}
}
function addDiv(btn){
var div = document.getElementById("div");
var table = div.getElementsByTagName("table")[0];
div.appendChild(table.cloneNode(true));
}
</script>
</head><body>
<table id="table_b" >
<tbody id="tbody_b">
<tr>
<td id="div">
<table border="2">
<tbody>
<tr>
<td> 物料名称: </td>
<td><input type="text" name="wuliao" id="wuliao"/></td>
<td></td>
</tr>
<tr>
<td> 计量单位: </td>
<td><select id="select_b" name="select_b">
<option value="TAI">台</option>
<option value="BU">部</option>
<option value="LIANG">辆</option>
</select>
<input type="text" name="text_j" id="text_j"/></td>
<td></td>
</tr>
<tr>
<td> 描述: </td>
<td><textarea name="textArea" id="textArea"></textarea></td>
<td><a href="#" onclick="delDiv(this)">删除</a></td>
</tr>
<tr>
<td><a href="#" onclick="addDiv(this)">添加</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></body>
</html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
var htmlStr = '<table border="2" ><tbody><tr><td>物料名称:</td><td><input type="text" size="32"/></td></tr><tr><td>计量单位:</td><td><select><option value="TAI">台</option><option value="BU">部</option><option value="LIANG">辆</option></select><input type="text" size="26"/></td></tr><tr><td>描述:</td><td><table><tr><td><textarea cols="25"></textarea></td><td><a href="#" onclick="delet(this)">删除</a><br><a href="#" onclick="add()">添加</a></td></tr></table></td></tr></tbody></table>';function add(){
var div = document.createElement("div");
div.innerHTML = htmlStr;
$("test").appendChild(div);
}function $(id){
return document.getElementById(id);
}function delet(obj){
while(obj.tagName!="DIV"){
obj = obj.parentNode ;
}
if(obj.parentNode.childNodes.length==1){
alert("只剩下最后一个不能删除！");
return ;
}else{
obj.parentNode.removeChild(obj);
}}
</script>
</head><body onload="add()">
<div id="test"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var div = $("#div3").get(0).innerHTML;
$("#add").click(function(){
$("#div2").append(div);
});
$("#del").click(function(){
$("#div2 > div").eq($("#div2 > div").length-1).remove();
});
});</script>
<body>
<div id="div2">
<div id="div1">
<table>
<tr>
<td>测试td</td>
</tr>
</table>
</div>
</div>
<div id="div3" style="display:none">
<div id="div1">
<table>
<tr>
<td>测试td</td>
</tr>
</table>
</div>
</div>
<input id="add" type="button" value="添加">
<input id="del" type="button" value="删除">
</body>
<script language="javascript">
var i = 1;
function add()
{
i++;
input = '<table align="center" id="tab' + i + '"><td>姓名' + i + '</td><td><input type="text" name="txt' + i + '" id="txt' + i + '"></td><td><a href="javascript:void(0);" onclick=add()>添加</a><a href="javascript:void(0);" onclick=del(\'tab' + i + '\')>|删除</a></td></table>'
if (document.all)
{
document.getElementById("addname").insertAdjacentHTML("beforeEnd", input);
}
else
{
var e = document.getElementById("addname").ownerDocument.createRange();
e.setStartBefore(document.getElementById("addname"));
e = e.createContextualFragment(input);
document.getElementById("addname").appendChild(e);
}
}
function del(m)
{
document.getElementById("addname").removeChild(document.getElementById(m));
} </script></head>
<body>
<form name="form1" action="" method="post">
<table>
<tr>
<td id="addname">
<span id="txtshow1">
<table align="center" id="tab1">
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="txt1" id="txt1">
</td>
<td>
<a href="javascript:void(0);" onclick="add()">添加</a>
</td>
</tr>
</table>
</span>
</td>
</tr>
</table>
</form>
</body>