<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> #senfe { width: 300px; border-top: #000 1px solid; border-left: #000 1px solid; } #senfe td { border-right: #000 1px solid; border-bottom: #000 1px solid; } input[type="text"] {background-color:#d0d0d0;} /*ie不支持*/ </style> <script language="javascript"> </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" id="senfe"> <tr> <td style="45px;"> </td> <td>姓名 </td> <td>学号 </td> <td>班级 </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td style="45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr> <tr> <td style="45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr> </table> <br/> <button onclick="saveTd();"> 保存</button> <script language="javascript"> var checkboxs=document.getElementsByName("checkbox"); for(var i=0;i<checkboxs.length;i++){ // 给所有复选款 添加 点击 事件 checkboxs[i].onclick= function(){ // 当被点击的时候 判断 是否被选中 如果这个对象被选中 就 高量 这一行 如果取消选中 就还原 if(this.checked){ this.parentNode.parentNode.style.backgroundColor="#d0d0d0"; }else{ this.parentNode.parentNode.style.backgroundColor=""; } } } var trs=document.getElementsByTagName("td"); for(var i=0;i<trs.length;i++){ trs[i].onclick= function(){ // 如果td的子标签 不存在 既没有 有没有input if(!this.childNodes[0]){ this.innerHTML="<input type='text' value=' ' />"; } else if(this.childNodes[0].tagName !='INPUT'){ // 如果单元格对象中不包含input 标签 var td_text = this.innerHTML; this.innerHTML=""; this.innerHTML="<input type='text' value='"+td_text+"' style='border:1px solid #0000C6;border-top-style:none;border-left-style:none;border-right-style:none;'/>" } } // click end } // for end function saveTd(){ var trs=document.getElementsByTagName("td"); for(var i=0;i<trs.length;i++){ if(trs[i].childNodes[0]){ if(trs[i].childNodes[0].tagName =='INPUT'&&trs[i].childNodes[0].type=='text'){ // 如果单元格对象中不包含input 标签 var td_text = trs[i].childNodes[0].value; trs[i].innerHTML=""; if(td_text==""||td_text=="undefined" ){ trs[i].innerHTML=" "; }else{ trs[i].innerHTML=""+td_text; } } //if end } }// for end } // save end </script> </body> </html>