[Help]JS新增删除表格

动态明细示例
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!377.entry

<HTML>
<HEAD>
<TITLE>测试</TITLE>
<script language="javascript">
function add()
{
var obj = document.createElement("div");
obj.innerHTML = '<table width="220" border="1"><tr><td><input type="text" name="textfield" /><a href=# onclick=del(this)>删除表格</a></td></tr></table>';
document.body.appendChild(obj);
}

function del(objs)
{
var parObj = objs.parentNode.parentNode.parentNode.parentNode;
parObj.style.display = "none";
}
</script>
</HEAD>
<BODY>
<input type="button" value="add" onclick="add()">
</BODY>
</HTML>试试吧。

厉害，谢谢大家的指教，但能否提供相关的资料呢？因为JS手册连"innerHTML"都查不到，晕倒！

买本书<javascript 权威指南>据说马上出第5版了

http://www.w3schools.com/js/default.asp

"JS手册连"innerHTML"都查不到"
----
楼主在csdn区有几年的时间吧,
是不是这期间没有做前台
怎么还问出这个问题
innerHTML是html的内容，应该查dhtml的参考书，
不是javascript的参考书

我有两本javascript手册。需要的话，给我发邮件：[email protected]联系。说明是要js手册的就可以了。

<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<STYLE TYPE="text/css"></STYLE>
<script language="javascript" type="text/JavaScript">
var i=1;
var mole=false;
var EditObj=null;
var oClickTR;
    function InsertTR(strObjName, strUserName){
        if(!strObjName || !strUserName)return;
        var obj=document.getElementById('SWlist');
        var TR=obj.insertRow();
        var TD1 = TR.insertCell(), TD2 = TR.insertCell(), TD3 = TR.insertCell(), TD4 = TR.insertCell(), TD5 = TR.insertCell(), TD6 = TR.insertCell();
        TR.align='center';
        TR.id='ListTR';
  TR.bgColor="#eeeeee";
        TD1.innerText=i;
        TD2.innerText=strObjName;
        TD3.innerText=strUserName;
        TD4.innerHTML='<a href=\"#\" onclick=\"EditTR(this);\">修</a>';
        TD5.innerHTML="<a href=\"#\" onclick=\"DelTR();\">删</a>";
        TD6.innerHTML='<a href=\"#\" onclick=\"MoveTR();\">上移</a>  <a href=\"#\" onclick=\"MoveTR();\">下移</a>';
        form1.t1.value='';
        form1.t2.value='';
        form1.t1.focus();
        i++;
    };    function EditTR(o){
        form1.t1.value=event.srcElement.parentElement.parentElement.children[1].innerText;
        form1.t2.value=event.srcElement.parentElement.parentElement.children[2].innerText;
        EditObj=o;
        mole=true;
    };    function EditSave(strObjName, strUserName){
        if(!strObjName || !strUserName)return;
        var obj=EditObj.parentElement.parentElement;
        var TD2=obj.children[1];
        var TD3=obj.children[2];
        TD2.innerText=strObjName;
        TD3.innerText=strUserName;
        form1.t1.value='';
        form1.t2.value='';
        form1.t1.focus();
        mole=false;
        EditObj=null;
    };    function DelTR(){
        var CZobj=document.getElementById('SWlist');
        var obj=event.srcElement;
        CZobj.deleteRow(obj.parentElement.rowIndex);
        for(var i=0; i<ListTR.length; i++)
            ListTR[i].children[0].innerText=i+1;
    };    function MoveTR(){
  var CZobj=document.getElementById('SWlist');  var TrIndex=event.srcElement.parentElement.parentElement.rowIndex - 2;  if(event.srcElement.innerText=='上移' && TrIndex > 0){
   CZobj.moveRow(TrIndex, TrIndex-1);
   for(var i=0; i<ListTR.length; i++)
    ListTR[i].children[0].innerText=i+1;
  }
  else if(event.srcElement.innerText=="下移" && TrIndex < ListTR.length-1){
   CZobj.moveRow(TrIndex, TrIndex+1);
   for(var i=0; i<ListTR.length; i++)
    ListTR[i].children[0].innerText=i+1;
  }else{
   return;
  }
    };function ClickTR(){
  if(oClickTR != null && oClickTR.tagName == "TR")oClickTR.bgColor="#eeeeee";
  oClickTR = event.srcElement.parentElement;
  if(oClickTR.tagName == "TR")oClickTR.bgColor=(oClickTR.bgColor=="#eeeeee")?"#ffffff":"#eeeeee";
};    function Save(){
        var hdINPUT='';
        for(var i=0; i<ListTR.length; i++){
            var strObjName=ListTR[i].children[1].innerText;
            var strUserName=ListTR[i].children[2].innerText;
            hdINPUT+="<input type=\"hidden\" name=\"strObjName[]\" value=\""+strObjName+"\"><input type=\"hidden\" name=\"strUserName[]\" value=\""+strUserName+"\">";
        }
        form1.insertAdjacentHTML("afterBegin", hdINPUT);
        form1.b2.submit();
        form1.b2.disabled=true;
    };
</script>
</HEAD><BODY bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
<div style="border:1px #7d7d7d solid;">
<form name="form1" method="post" action="test.php">
    步骤名称<input type="text" name="t1" /><br />
    执行人<input type="text" name="t2" /><br />
    <input type="button" value="添加" name="b1" onclick="(!mole)?InsertTR(t1.value, t2.value):EditSave(t1.value, t2.value)" />
    <input type="button" value="保存" name="b2" onclick="Save();" />
</form>
</div>
<table width="645" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCC" style="border-collapse:collapse;">
  <tr>
    <td colspan="6" align="center">步骤列表</td>
  </tr>
  <tr align="center" bgcolor="#99CCFF">
    <td width="57">序号</td>
    <td width="190">步骤名称</td>
    <td width="124">执行人</td>
    <td width="84">修改</td>
    <td width="84">删除</td>
    <td width="92">调整</td>
  </tr>
<Tbody id="SWlist" onclick="ClickTR();"></Tbody>
</table>
</BODY>
</HTML>

TO:JK_10000(JK)是的，我一般只用ASP与SQL做程序的后台处理，对HTML不太熟悉，只懂基本的资料。TO:pli0825(女儿当自强) 我有书，但只是我自己不知道，查错内容了。
谢谢大家！

TO:wuxinlangman(无心之尘 8.14号开始学习js技术不过关不要见怪) 删除时出错，listTR未定义。

TO:wuxinlangman(无心之尘 8.14号开始学习js技术不过关不要见怪) 还有修改后保存也出错，不过你这个够强，我要仔细钻研下。

回楼主留言：
---------------------<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title><style>
TD,INPUT{ font-size:12; }
</style>
</head><body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>JK的动态明细示例</h4><table align="center" bordercolor=cccccc border=1  width=100% >
<tr>
<td width=500>
</td>
<td align=right>
      <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();"> 
      <input type="button"  value="删除" class="bottom" onclick="delDetailProcess();"> 
      <input type="button"  value="完成" class="bottom" onclick="submitProcess();">

</td>
</tr>
</table>
<div width=100% id=detailTableContainer onkeydown="keyDownAndUpControl();">
<table align="center" bordercolor=cccccc border=1 width=100% >
  <tr bgcolor=eeeeee id="detailHeaderTr">
    <td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
    <td >明细ID*</td>
    <td >明细NAME</td>
  </tr>
  <tbody id="detailTbody" >
  </tbody>
<tr height=0 ><td colspan=100 height=0 > 合计</td></tr></table>
</div>
<br><br>
亮点:<br>
1.把添加新行的内容放在tbDetailPrepare里，会有一些好处（可读性好点，动态设置新行的默认值方便点）<br>
2.页面离开再退回来时，保留上次的innerHTML(相关代码在很多地方可以借鉴)<br>
3.上下键控制(请不要加左右键控制，左右键在input里已有用处,用户想实现左右移动焦点可以使用tab功能)<br></form>
<table id="tbDetailPrepare" style="display:none">
<tr>
<td rowspan=2><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
<tr>
<td ><input type="text" name="detail_property1" value='' ></td>
<td ><input type="text" name="detail_property1" value='' ></td>
</tr>
</table>

<textarea name="theHistoryRecord" value="" style="display:none;" rows="1" cols="20"></textarea>
</body></html><script language=javascript> window.onload = historyOncemore;
window.onbeforeunload = fixHistory; function fixHistory() //记住历史
{
document.all("theHistoryRecord").value=document.all("detailTableContainer").innerHTML;
} function historyOncemore() //恢复历史
{
if (document.all("theHistoryRecord").value!="")
{
document.all("detailTableContainer").innerHTML=document.all("theHistoryRecord").value;
}
} function selectallcheckbox(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=detailTbody.rows;
for(var i=0;i<theDetail.length;i=i+2)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}

function addDetailProcess() //增加明细
{
detailTbody.appendChild(tbDetailPrepare.rows[0].cloneNode(true))
detailTbody.appendChild(tbDetailPrepare.rows[1].cloneNode(true)) }

function delDetailProcess() //删除明细
{
var detailRows= detailTbody.rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=detailRows.length-2;i>=0;i=i-2)
{
if (detailRows[i].all("record_select").checked)
{
detailRows[i+1].removeNode(true);
detailRows[i].removeNode(true)
}
}
}

function keyDownAndUpControl() // 用于控制明细里的上下键。只控制input
{
var obj=event.srcElement;
var k=event.keyCode;
if (obj.tagName!="INPUT"||obj.name=="") return true;
if( k != 38 && k != 40 ) return true;
var theSamenameInputs=obj.form.elements(obj.name);
var i=0;
if (theSamenameInputs.length>1)
{
for (i=0;i<theSamenameInputs.length;i++)
{
if (theSamenameInputs[i]==obj) break;
}
} if((i>0)&&(k==38))
{
theSamenameInputs[i-1].select();
theSamenameInputs[i-1].focus();
event.returnValue=false;
return false;
}
if((i<theSamenameInputs.length-1)&&(k==40))
{
theSamenameInputs[i+1].select();
theSamenameInputs[i+1].focus();
event.returnValue=false;
return false;
}
}
function submitProcess()
{
      document.frm.submit();
}
</script>

调试易

[Help]JS新增删除表格

解决方案 »