页:
[1]
|
如何实现在当前表格中添加一行或是删除一行的功能？
如题，假如有如下表格，如何实现？高手说一下哈，谢谢了！
<table><tr><td>AAAAAA</td></tr>
<tr><td>BBBBBB</td></tr></table> |
|
[php]
<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<STYLE TYPE="text/css"><!--
a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;}
BODY, TD, SELECT{FONT-SIZE:9pt; FONT-FAMILY:"宋体";}
--></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>
[/php] |
Powered by Discuz! Archiver 6.1.0
© 2001-2006 Comsenz Inc.
Processed in 0.006539 second(s), 2 queries |