<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="width:45px;"> </td> <td>姓名 </td> <td>学号 </td> <td>班级 </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name="checkbox"></td>
<td> </td> <td> </td>
<td> </td>
</tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name="checkbox"></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width:45px;"><input type="checkbox" value="" name=""></td> <td> </td> <td> </td> <td> </td></tr>
<tr> <td style="width: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>
浙公网安备 33010602011771号