87,996
社区成员




想实现的目的,点击运行状态的单元格,可将状态变为启动或未启动。
实际情况是只有第一行的未启动状态可以改变,而且第二次点击后就没有没有反应。并且后面两列的内容点击都没效果。
请帮忙看下是哪里出了问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试服务器清单</title>
</head>
<style type="text/css">
.running_status
{
color:blue;
text-decoration:underline;
font:20px;
}
</style>
<script type="text/javascript">
var test_server_list={"192.168.30.1":["LA","未启动","pro1,pro2,pro3"],
"192.168.30.2":["WA","启动","pro3,pro5"],
"192.168.30.3":["CHN","启动","pro3,pro4"]};
function changRunningStatus(cell_obj)
{
var td = event.srcElement;
var row_index=cell_obj.parentElement.parentElement.rowIndex;
var cell_index=cell_obj.parentElement.cellIndex;
var table_obj=document.getElementById("server_table");
console.log("行号:" + row_index+ ",列号:" + cell_index);
if(this.innerHTML=="启动")
{
console.log("点击启动按钮");
cell_obj.parentElement.innerHTML='<span class="running_status" onclick="changRunningStatus(this)">未启动</span>';
// table_obj.rows[row_index].cells[cell_index].innerHTML='<span class="running_status" onclick="changRunningStatus(this)">未启动</span>';
}
else
{
console.log("点击未启动按钮");
cell_obj.parentElement.innerHTML='<span class="running_status" onclick="changRunningStatus(this)">启动</span>';
// table_obj.rows[row_index].cells[cell_index].innerHTML='<span class="running_status" onclick="changRunningStatus(this)">启动</span>';
}
}
function Inipage()
{
var table_obj=document.getElementById("server_table");
for( var attr in test_server_list)
{
var tr_obj=document.createElement("tr");
var td_ip=document.createElement("td");
td_ip.innerHTML=attr;
var td_location=document.createElement("td");
td_location.innerHTML=test_server_list[attr][0];
var td_status=document.createElement("td");
// td_status.innerHTML=test_server_list[attr][1];
td_status.innerHTML='<span class="running_status" onclick="changRunningStatus(this)"> \
'+test_server_list[attr][1]+'</span>';
var td_support=document.createElement("td");
td_support.innerHTML=test_server_list[attr][2];
tr_obj.appendChild(td_ip);
tr_obj.appendChild(td_location);
tr_obj.appendChild(td_status);
tr_obj.appendChild(td_support);
table_obj.appendChild(tr_obj);
}
}
</script>
<body onload="Inipage()">
<div id="main_center">
<table id="server_table" border="1px" style="border-collapse: collapse; ">
<tr>
<th>IP</th>
<th>位置</th>
<th>运行状态</th>
<th>支持设备</th>
</tr>
</table>
</div>
</body>
</html>
30行改为
if (cell_obj.innerText === "启动") {
此时的this指向的是函数并不是el元素;
innerHTML指的包含的所有元素(可能含空格),用innerText比较好,双等号不严谨,改为三等号
改下判断条件就好
cell_obj.parentElement.innerText == "启动"