javascript - 如何在表中使用 jQuery 在 <td> 和 &lt;input&gt; 之间正确交换，反之亦然？

Question

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

我想调用 <td> 之间的交换和 <input>反之亦然使用 jQuery 使用 .click() . 使用 jQuery 3.2.1

问题:

<td>被 <input> 取代单击时。当 <input>失焦，<input>换回来。第一个<input>可以多次单击一行。用户可以输入他们想要的任何内容，然后在 <input> 之外单击。并且可以发送数据。但是，如果有其他 <td>在同一行中单击，如果第一个 <td>该行是 <input>它将不再换回 <td> , <td>如果点击右侧的 's 现在将显示为 <input>的，但塌陷在第一个 <td> 之下该行并保持为 <input>的。 <input>不会换回 <td> . <input>无论在其外部单击以失去焦点，它都会保持不变，因此它可以恢复为 <td> .

我可以调用在 <td> 中输入的任何文本，问题出在下面的代码区域，我的 ID 存在并被正确调用，来自 <td> 的交换至 <input>反之亦然，执行不当。

提前致谢

代码:

//### 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();
    });
});

https://jsfiddle.net/t3H_DANIMAL/x8an7c0e/

Answer 1

我不太清楚你的问题是否有触发 tr 的特定原因的点击事件，所以我冒昧地将它移动到 td的，以及把 td data-field 中的标识值每个 td ，如您在代码片段 HTML 中所见。

在 JavaScript 代码中，您可以看到 .on("click",...)触发一个函数，该函数设置一个新的输入字段，用 td 填充的文本内容并将其插入到 td 中.

我还在输入字段上设置了反向功能 .blur()这样当文本字段失去焦点时，即当您单击或跳出它时，您删除输入字段并将输入的文本值放在 td 中。 .

.blur()也是我放置 Ajax 魔法来更新数据库的地方。

附言!请原谅我的 CSS hacks，这是一个匆忙的工作......:)

$('td').on('click', function(event){
  var name = $(this).attr('data-field');
  var value = $(this).text();
  var $input = $('<input>');
  $input.attr({
      'name': name,
      'id':name,
      'type':'text'
    });
    
  $input.val(value);
  
  $input.on('click',function(event){
    event.preventDefault();
    event.stopPropagation();
  });
  
  $input.on('blur',function(){
    $(this).parent().text($(this).val());
    /**
    * INSERT AJAX HERE
    **/
  });
  
  $(this).html($input);
  $input.focus();
});

table, tr, td {
  border: 1px solid silver;
  border-collapse: collapse;
  width: 500px;
}

tr {
  height:100%;
}

td {
  padding: 0px;
  word-wrap:none;
  text-wrap:none;
  font-size:20px;
  line-height:20px;
  height:100%;
  width: 25%;
}

td input {
  border:0px;
  width:100%;
  height:100%;
  margin:0px;
  padding: 0px;
  line-height:18px;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>col 1</th>
    <th>col 2</th>
    <th>col 3</th>
    <th>col 4</th>
  </tr>
  <tr>
    <td data-field="r1v1">row 1 val 1</td>
    <td data-field="r1v2">row 1 val 2</td>
    <td data-field="r1v3">row 1 val 3</td>
    <td data-field="r1v4">row 1 val 4</td>
  </tr>
  <tr>
    <td data-field="r2v1">row 2 val 1</td>
    <td data-field="r2v2">row 2 val 2</td>
    <td data-field="r2v3">row 2 val 3</td>
    <td data-field="r2v4">row 2 val 4</td>
  </tr>
</table>