表格上修改数据或删除,该如何处理

2012-03-06

表格上修改数据或删除有朋友做过在表格上修改数据或删除指定的一行后保存到数据库和点击一个button时表格

表格上修改数据或删除
有朋友做过在表格上修改数据或删除指定的一行后保存到数据库和点击一个button时表格新增一行的功能吗？请各位朋友提供一下思路呀，是不是要很多javascript的？谢谢。。。

[解决办法]
用AJAX技术可以实现了，，，每当修改时都去和服务器通讯，修改数据库中的信息
[解决办法]
是要很多 javascript
基本思路就是
现取到 table 里的一个tr 用getElementsByTagName
然后tr.cloneNode(true);
在修改tr的childNodes的值
最后appendChild(trClone)加入到table里
[解决办法]
<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>
<div style="font-size:10pt;">
注1：把添加新行的内容放在tbDetailPrepare里，会有一些好处（可读性好点，动态设置新行的默认值方便点。。。） <br/>
注2：存盘失败后返回本页，在FireFox下上次输入的值会丢失<br/>
注3：只支持input里的上下键移光标，左右键请用tab/shift+tab（本功能在FireFox1.5.0.8下有bug）。<br/>

<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：作者JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About%20RowAddAndDelete">JK_10000@yahoo.com.cn</a><br/>
<hr/>
</div>

<form name="frm" action="http://www.google.com" method=post >
<h4 align=center>JK的动态明细示例</h4>

<table align="center" bordercolor=cccccc border=1 width=100% >
<tr>
<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(event);">
<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>

</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>

<textarea id="theHistoryRecord" value="" style="display:none;" rows="1" cols="20"></textarea>

</body>

</html>

<script language=javascript>

window.onload = historyOncemore;//Only for IE
window.onbeforeunload = fixHistory;//Only for IE

function fixHistory()//记住历史
{
document.getElementById("theHistoryRecord").value=document.getElementById("detailTableContainer").innerHTML;
}

function historyOncemore()//恢复历史
{
if (document.getElementById("theHistoryRecord").value!="")
{
document.getElementById("detailTableContainer").innerHTML=document.getElementById("theHistoryRecord").value;
}
}

function selectallcheckbox(obj)//全选或全不选
{
var checkboxObjs=document.getElementsByName("record_select");
var tureorfalse=obj.checked;
for(var i=0;i<checkboxObjs.length-1;i++)
{
checkboxObjs[i].checked=tureorfalse;
}
}

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

}

function delDetailProcess()//删除明细
{
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
var checkboxObjs=document.getElementsByName("record_select");
for(var i=checkboxObjs.length-2;i>=0;i--)
{
if (checkboxObjs[i].checked)
{
var tempTr=checkboxObjs[i].parentNode.parentNode;
tempTr.parentNode.removeChild(tempTr);
}
}
}

function keyDownAndUpControl(event) // 用于控制明细里的上下键。只控制input
{
var obj=event.srcElement||event.target;
var k=event.keyCode;
if (obj.tagName!="INPUT"||obj.name=="") return true;
if( k != 38 && k != 40 ) return true;
var theSamenameInputs=document.getElementsByName(obj.name);
var i=0;
for (i=0;i<theSamenameInputs.length;i++)
{
if(theSamenameInputs[i]==obj)break;
}
if((i>0)&&(k==38))
{
theSamenameInputs[i-1].select();//There will be error in FireFox1.5
theSamenameInputs[i-1].focus();
event.returnValue=false;
return false;
}
if((i<theSamenameInputs.length-2)&&(k==40))
{
theSamenameInputs[i+1].select();//There will be error in FireFox1.5
theSamenameInputs[i+1].focus();
event.returnValue=false;
return false;
}
}

function submitProcess()
{
document.frm.submit();
}

</script>

热点排行

Bad Request.

JavaScript

表格上修改数据或删除,该如何处理