本文介绍了一个使用JavaScript实现的表格数据选择与修改功能的具体代码示例。通过点击表格行可以高亮显示选中行，并弹出一个窗口允许用户修改该行中的特定单元格数值。修改后的数据将实时更新到原表格中。
<HTML>
<head>
<script language="javascript">
var curRow=null;
[color=red]function SelectRow(TrObj){
if(curRow) curRow.style.backgroundColor="#FFFFFF";
TrObj.style.backgroundColor="#FFCC00";
curRow=TrObj;
} [/color]
function CalTotalScore(){
}
function ToModify(){
var pWin=window.open("","","width=200px,height=150px,left="+(screen.width-200)/2+",top="+(screen.height-150)/2);
pWin.document.write(divOpen.innerHTML);
pWin.document.all.txtMath.value=curRow.cells[1].innerText;
pWin.document.all.txtHis.value=curRow.cells[2].innerText;
pWin.document.all.txtEng.value=curRow.cells[3].innerText;
}
</script>
</head>
<body onLoad="CalTotalScore();">
<table align="center" width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse " bordercolor="#111111">
<tr>
<td width="100" align="center">姓名</td>
<td width="100" align="center">数学</td>
<td width="100" align="center">历史</td>
<td width="100" align="center">外语</td>
<td width="100" align="center">总分</td>
</tr>
<tr onClick="SelectRow(this)">
<td align="center">张三</td>
<td align="right">78</td>
<td align="right">92</td>
<td align="right">85</td>
<td align="right"> </td>
</tr>
<tr onClick="SelectRow(this)">
<td align="center">李四</td>
<td align="right">82</td>
<td align="right">68</td>
<td align="right">91</td>
<td align="right"> </td>
</tr>
<tr>
<td align="center" colspan="5">
<input type="button" value="修改" onClick="ToModify()">
<input type="button" value="关闭" onClick="javascript:window.close();">
</td>
</tr>
</table>
<div id="divOpen" style="display:none ">
<script language="javascript">
function doSave(){
var opener=window.opener;
opener.curRow.cells[1].innerText=txtMath.value;
opener.curRow.cells[2].innerText=txtHis.value;
opener.curRow.cells[3].innerText=txtEng.value;
}
</script>
<table width="80%" align="center" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse " bordercolor="#111111">
<tr>
<td width="40%" align="right">数学; </td>
<td width="60%"><input type="text" id="txtMath" style="width:100% "></td>
</tr>
<tr>
<td align="right">历史; </td>
<td><input type="text" id="txtHis" style="width:100% "></td>
</tr>
<tr>
<td align="right">外语; </td>
<td><input type="text" id="txtEng" style="width:100% "></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="保存" onClick="doSave()"></td>
</tr>
</table>
</div>
</body>
</html>
<head>
<script language="javascript">
var curRow=null;
[color=red]function SelectRow(TrObj){
if(curRow) curRow.style.backgroundColor="#FFFFFF";
TrObj.style.backgroundColor="#FFCC00";
curRow=TrObj;
} [/color]
function CalTotalScore(){
}
function ToModify(){
var pWin=window.open("","","width=200px,height=150px,left="+(screen.width-200)/2+",top="+(screen.height-150)/2);
pWin.document.write(divOpen.innerHTML);
pWin.document.all.txtMath.value=curRow.cells[1].innerText;
pWin.document.all.txtHis.value=curRow.cells[2].innerText;
pWin.document.all.txtEng.value=curRow.cells[3].innerText;
}
</script>
</head>
<body onLoad="CalTotalScore();">
<table align="center" width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse " bordercolor="#111111">
<tr>
<td width="100" align="center">姓名</td>
<td width="100" align="center">数学</td>
<td width="100" align="center">历史</td>
<td width="100" align="center">外语</td>
<td width="100" align="center">总分</td>
</tr>
<tr onClick="SelectRow(this)">
<td align="center">张三</td>
<td align="right">78</td>
<td align="right">92</td>
<td align="right">85</td>
<td align="right"> </td>
</tr>
<tr onClick="SelectRow(this)">
<td align="center">李四</td>
<td align="right">82</td>
<td align="right">68</td>
<td align="right">91</td>
<td align="right"> </td>
</tr>
<tr>
<td align="center" colspan="5">
<input type="button" value="修改" onClick="ToModify()">
<input type="button" value="关闭" onClick="javascript:window.close();">
</td>
</tr>
</table>
<div id="divOpen" style="display:none ">
<script language="javascript">
function doSave(){
var opener=window.opener;
opener.curRow.cells[1].innerText=txtMath.value;
opener.curRow.cells[2].innerText=txtHis.value;
opener.curRow.cells[3].innerText=txtEng.value;
}
</script>
<table width="80%" align="center" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse " bordercolor="#111111">
<tr>
<td width="40%" align="right">数学; </td>
<td width="60%"><input type="text" id="txtMath" style="width:100% "></td>
</tr>
<tr>
<td align="right">历史; </td>
<td><input type="text" id="txtHis" style="width:100% "></td>
</tr>
<tr>
<td align="right">外语; </td>
<td><input type="text" id="txtEng" style="width:100% "></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="保存" onClick="doSave()"></td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
