javascript对表格的操作

最新推荐文章于 2022-05-05 23:14:28 发布

最新推荐文章于 2022-05-05 23:14:28 发布 · 200 阅读

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文提供了一个简单的HTML页面示例，展示了如何使用JavaScript实现表格行的选择及修改功能。通过打开一个新窗口并填写修改后的成绩，可以更新表格中的数学、历史和外语分数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML> 
<head> 
<script   language="javascript"> 
var   curRow=null; 
function   SelectRow(TrObj){ 
if(curRow)   curRow.style.backgroundColor="#FFFFFF"; 
TrObj.style.backgroundColor="#FFCC00"; 
curRow=TrObj; 
} 
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">&nbsp;</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">&nbsp;</td> 
      </tr> 
      <tr> 
          <td   align="center"   colspan="5"> 
<input   type="button"   value="修改"   onClick="ToModify()">&nbsp; 
<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">数学;&nbsp;</td> 
          <td   width="60%"><input   type="text"   id="txtMath"   style="width:100%   "></td> 
      </tr> 
      <tr> 
          <td   align="right">历史;&nbsp;</td> 
          <td><input   type="text"   id="txtHis"   style="width:100%   "></td> 
      </tr> 
      <tr> 
          <td   align="right">外语;&nbsp;</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>