代码有点长 仿着网上的教程做的
<html>
<head>
<style>
td{
text-align:center;
}
</style>
</head>
<body>
<table border="1px solid black" width="25%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td><a href="javascript:;" onclick="deletOne(this)">删除</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a href="javascript:;" onclick="deletOne(this)">删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" name="btn"/>
<input type="button" value="删除所有行" name="btn"/>
<p>单击表格可以修改</p>
<script>
window.onload=function(){
changeRowCss();
}
//变换行数底色
function changeRowCss(){
var tr=document.getElementsByTagName("tr");
for(var i=1;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor="#ccc";
}
tr[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
//添加一行
var btn=document.getElementsByName("btn");
btn[0].onclick=function(){
var tbody=document.getElementById("table").lastChild;
var tr=document.createElement("tr");
tbody.appendChild(tr);
var td=document.createElement("td");
tr.appendChild(td);
td=document.createElement("td");
tr.appendChild(td);
td=document.createElement("td");
td.innerHTML="<a href='javascript:;' onclick='deletOne(this)'>删除</a>";
tr.appendChild(td);
changeRowCss();
}
//删除所有行
btn[1].onclick=function(){
var tbody=document.getElementById("table").lastChild;
var tr_length=tbody.childNodes.length;
for(var i=1;i<tr_length;i++){
tbody.removeChild(tbody.childNodes[1]);
}
}
//删除单独一行
function deletOne(obj){
var tbody=document.getElementById("table").lastChild;
var tr=obj.parentNode.parentNode;
tbody.removeChild(tr);
}
//修改表格内容
var table=document.getElementById("table");
table.onclick=function(e){
var ev=e||window.event;
var tdobj=ev.srcElement||ev.target;
if(tdobj.nodeName=="TH"){
return;
}
if(tdobj.nodeName=="TABLE"){
return;
}
if(tdobj.nodeName=="A"){
return;
}
var tdText=tdobj.innerHTML;
tdobj.innerHTML=" ";
var inputs=document.createElement("input");
inputs.setAttribute("type","text");
inputs.setAttribute("size",8);
tdobj.appendChild(inputs);
inputs.focus();
inputs.onblur=inputs.onkeydown=function(e){
var ev=e||window.event;
if(ev.type=="blur"||ev.type=="keydown"&&ev.keyCode==13){
var val=this.value;
tdobj.removeChild(inputs);
if(val==""){
tdobj.innerHTML=tdText;
}else{
tdobj.innerHTML=val;
}
}
}
}
</script>
</body>
</html>
问题就是：怎么才可以点击td内容为删除的这个格子不被修改内容呢？
我试过方法一：tdobj.nodeName=="A"
方法二：if(tdobj.innerHTML=="<a href='javascript:;' onclick='deletOne(this)'>删除</a>"){
return;
}
这些都没有用
方法三：tbobj.innerHTML！=“ ” 这个是有用的,但是这样子一来就不可以修改表格里默认的内容了。不是我想要的。
求问大神有什么方法可以只修改学号姓名两列的td内容，而不能修改操作这一列的td内容呢？
相关分类