jquery - 将单元格转化为可编辑文本

風花_10969

于 2019-05-27 15:24:29 发布

阅读量348

点赞数

文章标签： jquery

博客围绕jQuery展开，但具体内容缺失。jQuery是前端开发中常用的库，能简化HTML文档遍历、事件处理等操作。

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

<table class="table table-striped table-hover table-input">
<thead>
<tr>
<th width="12%">接收人</th>
<th width="12%">接收方式</th>
<th width="21%">邮件／手机号码</th>
<th width="25%">服务地址</th>
<th width="15%">通知间隔时间(分)</th>
<th width="15%">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>占三</td>
<td>短信</td>
<td>13868767676</td>
<td>2823378</td>
<td>30</td>
<td class="action"><a href="#" class="t-red">删除</a></td>
</tr>
</tbody>
</table>

//#btn-xinzeng 增加行
$("body").on("click", "#btn-xinzeng", function(){
    var trCon = "<tr height='33px'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
    $(".table tbody").append(trCon);
});
// 将单元格转化成文本框
function changeTotext(obj) {
    var tdValue = obj.innerText;
    obj.innerText = "";
    var txt = document.createElement("input");
    txt.type = "text";
    txt.value = tdValue;
    txt.id = "_text_000000000_";
    txt.setAttribute("class", "form-control");
    obj.appendChild(txt);
    txt.select();
    //obj.style.border = "1px dashed #ff9900";
}
// 取消单元格中的文本框，并将文本框中的值赋给单元格
function cancel(obj) {
    var txtValue = document.getElementById("_text_000000000_").value;
    obj.innerText = txtValue;
}
// 事件
var table = document.getElementsByClassName("table-input")[0];
table.addEventListener("click", function(e) {
    if (e.srcElement.tagName == "TD" && e.srcElement.classList.contains("action") == false) {
        changeTotext(e.target);
    }
})
document.onmouseup = function() {
    if (document.getElementById("_text_000000000_") && event.srcElement.id != "_text_000000000_") {
        var obj = document.getElementById("_text_000000000_").parentElement;
        cancel(obj);
    }
}