怎样用javascript写一个动态编辑表格

部分代码来自：
动态明细示例
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!377.entry
--------------------------<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="checkbox" name="autoAddDetailCheckbox">&nbsp;  
      <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();">&nbsp;                                 
      <input type="button"  value="删除" class="bottom" onclick="delDetailProcess();">&nbsp;                                 
      <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" >
  <tr>
  <td ><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>
  </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 ><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>
</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++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}


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

function delDetailProcess() //删除明细
{
var detailRows= detailTbody.rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=detailRows.length-1;i>=0;i--)
{
if (detailRows[i].all("record_select").checked)
{
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 && theSamenameInputs.length==null) || (i==theSamenameInputs.length-1))&&(k==40))
{
if(document.all("autoAddDetailCheckbox")!=null && document.all("autoAddDetailCheckbox").checked)
addDetailProcess();
}
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>

解决方案 »

  1.   

    谢谢楼上的回复
    但是我想要的效果不止是这些我想实现
    效果就象SQLServer企业管理器中添加数据时的那种效果
    即 当编辑完一个单元格,按回车键就跳转至下一个单元格,
    当编辑到最后一个单元格时,自动添加一新行,
    当按方向键时,可以随意跳转至任意一个单元格.
      

  2.   

    "但是我想要的效果不止是这些"
    -----
    sorry，我也没有想百分百的满足你的效果
    不是想提供控件，只是想提供代码思路示例，
    如果你发贴是想找个代码工，
    来百分百的去完成你的需求，
    这想法可能有点奢侈。