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

$(".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);

    });

Answer 2

在您的问题中，您声明了变量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>

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

2 个答案: