javascript 动态修改单元格内容失败

yyang0514 2022-06-21 11:35:16

想实现的目的,点击运行状态的单元格,可将状态变为启动或未启动。

实际情况是只有第一行的未启动状态可以改变,而且第二次点击后就没有没有反应。并且后面两列的内容点击都没效果。

请帮忙看下是哪里出了问题。

<!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>

 

...全文
红包已过期,查看明细
拼手气红包 3.00元
152 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
aら 淼 2022-07-20
  • 打赏
  • 举报
回复
1人已打赏
1

30行改为
if (cell_obj.innerText === "启动") {
此时的this指向的是函数并不是el元素;
innerHTML指的包含的所有元素(可能含空格),用innerText比较好,双等号不严谨,改为三等号

long_gao_tian 2022-06-22
  • 打赏
  • 举报
回复 2

改下判断条件就好
cell_obj.parentElement.innerText == "启动"

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧