Question

我有一个表，一行有3个输入。我需要的是，在填充此行中的所有输入后，添加一个新行，其中3个输入与之前相同。

 <select>
  <option value="apple">apple</option>
  <option value="pear">pear</option>
  <option value="orange">orange</option>
  <option value="orzo">orzo</option>
</select>

<script>
    $(function(){

            // Firefox
            $("select").keypress(function(e){ return (e.which != 8)});

            // IE
            $(document).keydown(function(){
                return (typeof window.event != 'undefined' &&
                            event.keyCode == 8 &&
                            event.srcElement.type == 'select-one');
            });

            });
</script>

提前致谢。

Answer 1

这对你有用吗？

jQuery(document).ready(function($) {


        var counter = 2;
            $("#addRow").click(function(){
            $('table tr').last().after('<tr><td><input type="text" name="h[]"></td><td><input type="text" name="w[]"></td><td><input type="text" name="d[]"></td></tr>');
            counter++;
        });

    $("#delRow").click(function(){
        if($('table tr').size()>1){
            $('table tr:last-child').remove();
        }else{
            alert('You can not remove the last row from the table.');
        }
     });


})

表格：

<button type="button" id="addRow">Add Row</button>
<button type="button" id="delRow">x</button>
<table>
  <thead>
    <tr>
      <th>H</th>
      <th>W</th>
      <th>D</th>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="h[]">
      </td>
      <td>
        <input type="text" name="w[]">
      </td>
      <td>
        <input type="text" name="d[]">
      </td>
    </tr>
  </tbody>
</table>

请在此处查看：

https://jsfiddle.net/jn8cvg7f/

Answer 2

当用户按enter时，如果所有字段都有值，则可以添加新行;如果单击删除按钮，则删除最近的tr。以下代码段可能会对您有所帮助。

$(document).on('blur', 'tr input[type=text]:last', function() {
      var willAdd = true, tr = $(this).closest('tr');

      tr.find('input[type=text]').each(function() {
          if ($(this).val() == '')
              willAdd = false;
      });
 
      if (!willAdd || tr.next('tr').length) return;

      $('table > tbody').append('<tr><td><input type="text" name="h[]"></td>' +
            '<td><input type="text" name="w[]"></td>' +
            '<td><input type="text" name="d[]"></td>' +
            '<td><button class="delete" type="button">x</button></td></tr>');
});
        
$(document).on('click', '.delete', function () {
      var tr = $(this).closest('tr');
      if ($('table > tbody > tr').length > 1) {
         tr.remove();
      } else {
         tr.find('input[type=text]').val('');
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>H</th>
      <th>W</th>
      <th>D</th>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="h[]">
      </td>
      <td>
        <input type="text" name="w[]">
      </td>
      <td>
        <input type="text" name="d[]">
      </td>
      <td>
        <button class="delete" type="button">x</button>
      </td>
    </tr>
  </tbody>
</table>

填充当前输入行后，Jquery会附加新的输入行，N次

2 个答案: