将值转换为输入后，将值保留在行表中

Question

在使用模态在行中插入值后，我有一个按钮将单元格内容转换为输入文本。我的问题是每个字段都填充了一个值，而不是每个字段都填入了模态。我也尝试不使用函数not（）转换两个单元格但它没有任何改变。

插入后的行：

<table id="myTab">
     <tr>
        <td>name</td>
        <td>phone</td>
        <td>country</td>
        <td><dropdown id="drop1"/>...</td> 
        <td><dropdown id="drop2"/>...</td>
      </tr>
</table>

点击按钮时我目前拥有的内容：

<table id="myTab">
         <tr>
            <td><input type="text">name</input></td>
            <td><input type="text">name</input></td>
            <td><input type="text">name</input></td>
            <td><input type="text">name</input></td>
            <td><input type="text">name</input></td>
          </tr>
</table>

我想得到什么：

<table id="myTab">
         <tr>
            <td><input type="text">name</input></td>
            <td><input type="text">phone</input></td>
            <td><input type="text">country</input></td>
            <td><dropdown id="drop1"/>...</td>
            <td><dropdown id="drop2"/>...</td>
         </tr>
</table>

这段代码：

function updateRow() {
//the values from the modal
  name = $("#name").val();
  phone = $("#phone").val();
  country = $("#country").val();

  $(".btn").click(function() {

    var nottarget = $("td:not(#drop1):not(#drop2)");
    var cell = $("#myTab > tbody > tr:last");

     cell.children().each(function() {
     nottarget.each(function(){

     //the inputs 
     var input = $('<input type="text" id="txtinput" value="' + name + '">');
     var input = $('<input type="text" id="txtinput" value="' + phone + '">');
     var input = $('<input type="text" id="txtinput" value="' + country + '">');

     $(this).html(input);

    });
 });
}

Answer 1

在你的问题中，你宣布变量input 3次。只保留最后一个定义，并应用于每个单元格。

既然你知道你想要3个第一个单元格附加一个输入......让我们通过只使用一个循环来简化这个过程。

现在，基于循环index，它将仅附加正确的信息。

我假设你有一些值使用.val()的名字，电话和国家......

最后一件事......不要在页面中多次使用相同的id。请注意，我向id="txtinput"添加了数字。它也可能是nameInput ...使用一些描述性的ID是件好事。

$(".btn").click(function() {
  name = "John Doh"; //$("#name").val();
  phone = "555-5678"; //$("#phone").val();
  country = "Mongolia"; //$("#country").val();

  var cell = $("#myTab tr:last td");

  cell.each(function(index) {
    if(index==0){
      var input = $('<input type="text" id="txtinput1" value="' + name + '">');
      $(this).html(input);
    }
    if(index==1){
      var input = $('<input type="text" id="txtinput2" value="' + phone + '">');
      $(this).html(input);
    }
    if(index==2){
      var input = $('<input type="text" id="txtinput3" value="' + country + '">');
      $(this).html(input);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="myTab">
  <tr>
    <td>name</td>
    <td>phone</td>
    <td>country</td>
    <td><dropdown id="drop1"/>...</td> 
    <td><dropdown id="drop2"/>...</td>
  </tr>
</table>
<button class="btn">Button</button>

Answer 2

$(".btn").click(function() {

    var nottarget = $("td:not(#drop1, #drop2)");
    var cell = $("#myTab  tbody  tr:last");

     cell.each(function() {
     nottarget.each(function(){

     //the inputs 
     var input = $('<input type="text" id="txtinput" value="' + name + '">');
     var input = $('<input type="text" id="txtinput" value="' + phone + '">');
     var input = $('<input type="text" id="txtinput" value="' + country + '">');

     $(this).html(input);

    });