JS修改Table中Td的值(修改)-优快云博客

根据客户需求，将原单击修改表格数据的方式改为双击事件，并在按下ESC键时取消更改。此更新移除了‘确定’和‘取消’按钮，仅对表格的tbody部分进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户需求至上。

这次是更改后的代码，去掉了“确定”，“取消”按钮。变单击为双击事件，用户按ESC键，取消更改。

Code
//为每个Td添加双击事件
function ReWritable()
{
    var tbmian=document.getElementById("tbmain");
    //循环，为每行每列添加双击事件，但是，第一行（thead）与最后一行（tfoot）不添加。
    for(var i=1;i<tbmain.rows.length-1;i++)
    {
        for(var j=0;j<tbmain.rows[i].cells.length;j++)
        {
            tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
        }
    }
}
//定义td的双击事件，为其添加文本框，使用用户可以输入。
function TdDoubleClick()
{
    //首先判断是不是该方格已经存在文本框，如果存在，则返回，不重复添加文本框。如果不存在，则添加。
        var tdcag=document.getElementById("tdcag");
        var tdid=null;
        var txtid=null;
        var curtd=window.event.srcElement;
        if(tdcag!=null)//已经存在，返回。
        {
            return;
        }
    //不存在，则添加
    tdid=window.event.srcElement;
    tdtxt=tdid.innerText;
    tdtxt=Trim(tdtxt);
    var str="<div id='tdcag'><input type='text' οnblur='ChangeTdText();' id='txtId' value='"+tdtxt+"'>";
    str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>";
    str+="</div>";
    tdid.innerHTML=str;
    //使文本框获得焦点。
    document.getElementById("txtId").focus();
    var ctr=document.getElementById("txtId").createTextRange();
    ctr.collapse(false);
    ctr.select();
}
//去除字符串前后的空格。
function   Trim(str)
{
    return   str.replace(/(^\s*)|(\s*$)/g,   "");
}
//定义KeyPress按下时的事件，如果是ESC键，则取消更改，恢复为更改前的值。
document.onkeypress = function EscKeyPress()
{
    if(event.keyCode==27)
    {
        CancelTdChanged();
        return;
    }
}
//取消更改，
function CancelTdChanged()
{
    var tdInitValue=document.getElementById("tdInitValue");
    var tdtxt=tdInitValue.value;
    var tdid=document.getElementById("tdcag").parentNode;
    tdid.innerText=Trim(tdtxt);
}
//确定更改，
function ChangeTdText()
{
    var txtId=document.getElementById("txtId");
    if(txtId==null)
    {
        return;
    }
    var tdid=document.getElementById("tdcag").parentNode;
    tdid.innerText=Trim(txtId.value);
    return;
}

其它代码，与以前相同。只是取消了对表的Thead与Tfoot的更改。

Code

<body onload="ReWritable();">
<table id="tbmain" style="width:100%;" border="1">
<thead>
<tr>
<td>thead,thead,thead</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
tfoot,tfoot,tfoot
</td>
</tr>
</tfoot>
<tr>
    <td>11
    </td>

    <td>12
    </td>

    <td>13</td>

</tr>
<tr>
    <td>21
    </td>

    <td>22
    </td>

    <td>23
    </td>
</tr>
<tr>
    <td>31
    </td>

    <td>32
    </td>

    <td>33
    </td>
</tr>
</table>
</body>

转载于:https://www.cnblogs.com/RitchieChen/archive/2008/08/06/1261930.html