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>

...全文

点击领取