Question

我正在重新发布此内容，因为可能没有正确描述。我正在尝试在表单中的表中添加一个按钮，以创建用于输入的新行，并且在新行的末尾，它应该显示另一个按钮以插入另一行，依此类推。

我试图通过从函数本身调用函数以在创建行时添加新按钮并隐藏上一个按钮来实现这一点。

这是我的实际代码

  if(!$('input[name="addressee\\[line3\\]"').length) {
    add_button(3);
  } else if (!$('input[name="addressee\\[line4\\]"').length) {
    add_button(4);
  }

  function add_button(number) {
    let btn = $('<input/>', {
      'type': 'button',
      'value': 'add line',
      'data-number': number,
      'on': {
        click: function() {
          let row  = $('<tr><td><label for="line' + number + '">Addresse(suite)</label></td><td><input name="line' + number + '" style="width: 300px"/></td></tr>');
          $('input[name="addressee\\[line' + (number - 1) + '\\]"').closest('tr').after(row);
          if ($(this).data('number') == '3') {
            add_button(4);
          }
          $(this).hide();
        }
      }
    });
    $('input[name="addressee\\[line' + (number - 1) + '\\]"').after(btn);
  }

这是HTML，它只是一个简单的表

<table>
    <tr>
      <td>
        <label for="line2">Adresse</label>
      </td>
     <td>
       <input type="text" name="addressee[line2]" value="250 rue des granges" style="width: 300px"><br>          
     </td>
    </tr>
</table>

它创建了第一行，但是创建时按钮未显示在第二行。

see jsfiddle

我尝试了很多事情，但这是我设法获得的最好的结果。

Answer 1

当您单击按钮时设置下一个功能时，请小心您的add_button功能

function add_button(number) {
  let btn = $('<input/>', {
    'type': 'button',
    'value': 'add line',
    'data-number': number,
    'on': {
      click: function() {

        // \/ HERE YOU DON'T SET "addressee[line..]" BUT JUST "line" ON THE NAME OF THE INPUT

        let row  = $('<tr><td><label for="line' + number + '">Addresse(suite)</label></td><td><input name="line' + number + '" style="width: 300px"/></td></tr>');

        // /\

        $('input[name="addressee\\[line' + (number - 1) + '\\]"').closest('tr').after(row);
        if ($(this).data('number') == '3') {
          add_button(4);
        }
        $(this).hide();
      }
    }
  });
  $('input[name="addressee\\[line' + (number - 1) + '\\]"').after(btn);
}

如何制作将按钮绑定到同一功能的功能

1 个答案: