增加一个表格可以:
function add()
{
var obj = document.createElement("div");
obj.innerHTML = "<table><tr><td>HELLO</td><td>good</td></tr></table>";
document.body.appendChild(obj);
}删除预定的??什么叫预定的呢?
function add()
{
var obj = document.createElement("div");
obj.innerHTML = "<table><tr><td>HELLO</td><td>good</td></tr></table>";
document.body.appendChild(obj);
}删除预定的??什么叫预定的呢?
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!377.entry
<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>试试吧。
----
楼主在csdn区有几年的时间吧,
是不是这期间没有做前台
怎么还问出这个问题
innerHTML是html的内容,应该查dhtml的参考书,
不是javascript的参考书
<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>
谢谢大家!
---------------------<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><!--复制的内容,请把它放在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>
<!--用来记忆上次页面离开时的innerHtml-->
<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>