Javascript 如何在<；td>；及<；输入>；反之亦然，在表中使用jQuery？

我有一个数据表。数据存储在数据库中，我不允许用户访问phpmyadmin，而是允许他们更改从网页访问的此表中的数据。我可以轻松地发布/插入/更新数据，但我遇到的困难是允许用户编辑表中的数据

我想使用jQuery调用

和

之间的交换，反之亦然使用jQuery 3.2.1

问题：

单击时，

将替换为

。当

调出焦点时，

调回。行的第一个

可以单击多次。用户可以输入他们想要的任何内容，然后在

之外单击，然后可以发送数据。但是，如果单击同一行中的任何其他

，如果该行的第一个

是

，它将不再交换回

，如果单击该行右侧的

，现在将显示为

，但折叠在行的第一个

下，并保持为

。

将不会切换回

。

保持不变，无论在其外部单击是否会失去焦点，因此它可以恢复为

我可以调用在

中输入的任何文本，问题在下面的代码区域内，我的ID存在并被正确调用，从

到

的交换以及反之亦然的交换未正确执行。

提前谢谢

代码：

/####单击时获取行中插入按钮的值###
$（“tr”）。在（“单击”）上，函数（事件）{
neededValue1=$（this.attr（'value'）；
neededValue=neededValue1；
console.log（“按钮值：”+neededValue）；
//###在带有行值的tr中单击id###
$（“#matName”+neededValue）。单击（函数（）{
//####交换###
$ele1=$（此项）；
$input1=$（''）.val（$ele1.text（））；
$ele1.替换为（$input1）；
//###保存输入并调回###
save=函数（）{
var$p=$（''）.text（$input1.val（））；
$input1.替换为（$p）；
};
$input1.one（'blur'，save）.focus（）；
});
$（'#bed0FL'+needdValue）。单击（函数（）{
$ele2=$（此项）；
$input2=$（''）.val（$ele2.text（））；
$ele2.替换为（$input2）；
save=函数（）{
var$p2=$（''）.text（$input2.val（））；
$input2.替换为（$p2）；
};
$input2.one（'blur'，save）.focus（）；
});
});

---

从您的问题中我不太清楚触发

tr

点击事件是否有具体原因，因此我冒昧地将其移动到

td

，并将

td

的标识值放入每个

td

的

数据字段中，正如您在HTML代码片段中看到的那样

在JavaScript代码中，您可以看到
.on（“单击“，…）
触发一个函数，该函数设置一个新的输入字段，该字段填充
td
的文本内容，并将其插入
td

我还对输入字段
.blur（）
设置了反转功能，这样当文本字段失去焦点时，即当您单击或用tab键离开它时，您可以删除输入字段并将输入中的文本值放置在
td
中

.blur（）
也是我使用Ajax魔术来更新数据库的地方

PS！请原谅我的CSS攻击，这是一个匆忙的工作…：）


$（'td'）。在（'click'，函数（事件）{
var name=$（this.attr（'data-field'）；
var值=$（this.text（）；
变量$input=$（''）；
$input.attr({
“名称”：名称，
“id”：名称，
“类型”：“文本”
});
$input.val（值）；
$input.on（'click'，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
});
$input.on（'blur'，function（）{
$（this.parent（）.text（$（this.val（））；
/**
*在此处插入AJAX
**/
});
$（this.html（$input）；
$input.focus（）；
});
表格，tr，td{
边框：1px纯银；
边界塌陷：塌陷；
宽度：500px；
}
tr{
身高：100%；
}
运输署{
填充：0px；
换行字：无；
文本换行：无；
字体大小：20px；
线高：20px；
身高：100%；
宽度：25%；
}
td输入{
边界：0px；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
线高：18px；
字号：18px；
}

第1列
第2列
第3列
第4列
第1行val 1
第1行val 2
第1行val 3
第1行val 4
第2行val 1
第2行val 2
第2行val 3
第2行val 4
请提供HTML或更好的jsfiddle，不要将
与
交换。将
的内容与
交换。否则，您将破坏表的布局。@rickdenhaan我应该将a放在中并调用它吗？或者我可以调用的.text（）吗？您可能只需要使用
的
.text（）
，但它有助于查看HTML结构，如Naren Murali所述。jQuery的.text（）用于文本字符串。您正在查找.html（），我触发TR事件是因为我动态地提取每行所需的值。我需要这个值，这样当我将更新推送到数据库时，它可以正常运行。@Yah_DANIMAL Ok，那么唯一的值是特定于行的，就像数据库行id一样？只需将
数据字段
或其他自定义属性设置为id，并使用
$（this）.parent（）.attr（'data-field'）
从触发的
td
访问它。您还可以修改我提供的HTML，以便只有要编辑的字段才具有类似
dataEDI的属性
//### get value of insert button in row when clicking on <td> ###
$("tr").on("click",function(event){

    neededValue1 = $(this).attr('value');
    neededValue = neededValue1;
    console.log("<tr> button Value: "+neededValue);

    //### id clicked in tr w/row value ###
    $('#matName'+neededValue).click(function(){

        // ### Swap <td> with <input>###
        $ele1 = $(this);
        $input1 = $('<input id="UpdatedInput'+neededValue+' "/>').val($ele1.text());
        $ele1.replaceWith($input1);


        //### Save the Input entered and swap back###
        save = function(){
            var $p = $('<td id="matName'+neededValue+'"/>').text($input1.val());
            $input1.replaceWith($p);
        };

        $input1.one('blur', save).focus();
    });


    $('#bed0FL'+neededValue).click(function(){

        $ele2 = $(this);
        $input2 = $('<input id="UD'+neededValue+'"/>').val($ele2.text());
        $ele2.replaceWith($input2);

        save = function(){
            var $p2 = $('<td id="bed0FL'+neededValue+'" />').text($input2.val());
            $input2.replaceWith($p2);
        };

        $input2.one('blur', save).focus();
    });
});