表仅在第一行执行计算。

Question

我已经构建了一个交互式表，您可以在其中手动添加和删除行(通过引导)。一切都很好！

现在出现了一个问题:我有一些自动计算的输入字段。但问题是，表只在标准行中执行计算，而不是在可寻址行中执行计算。

这是表的.HTML和.JS：

​

jQuery(document).delegate('a.add-record_venr', 'click', function(e) {
    e.preventDefault();
    var content = jQuery('#sample_table_venr tr'),
    size = jQuery('#tbl_posts_venr >tbody >tr').length + 1,
    element = null,
    element = content.clone();
    element.attr('id', 'rec_venr-'+size);
    element.find('.delete-record_venr').attr('data-id', size);
    element.appendTo('#tbl_posts_body_venr');
    element.find('.sn').html(size);
    });
    jQuery(document).delegate('a.delete-record_venr', 'click', function(e) {
    e.preventDefault();
    var didConfirm = confirm("Ventilatierooster verwijderen?");
    if (didConfirm == true) {
    var id = jQuery(this).attr('data-id');
    var targetDiv = jQuery(this).attr('targetDiv');
    jQuery('#rec_venr-' + id).remove();
    
    //regnerate index number on table
    $('#tbl_posts_body_venr tr').each(function(index) {
    //alert(index);
    $(this).find('span.sn').html(index+1);
    });
    return true;
    } else {
    return false;
    }
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  

<div class="wellclearfix">
<a class="btn btn-primary pull-right add-record_venr" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a>
            </div>

            <div class="container-fluid" style="margin-left:1px ;">
                  <table class="table table-stripped" id="tbl_posts_venr">
                    <thead style="background-color:#c7c8cc; width: 100% !important;">
                      <tr>
                        <th style="width:30px ;">Merk</th>
                        <th >Lengte rooster</th>
                        <th >Type rooster</th>
                        <th >Capaciteit [dm3/s]</th>
                        <th >Max. capaciteit [dm3/s]</th>
                        <th >Verblijfsgebied</th>
                        <th >Verblijfsruimte</th>
                        <th >Verwijderen</th>
                      </tr>
                    </thead>
                    <tbody id="tbl_posts_body_venr">
                      <tr id="rec_venr-1">
                        <td><input class="inputtext" type="text" name="" placeholder="Merk"> </td>
                        <td><input class="inputtext" type="text" name="lrooster" id="lrooster" placeholder="Lengte rooster"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Type rooster"></td>
                        <td><input class="inputtext" type="text" name="caprooster" id="caprooster" placeholder="Capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="maxcaprooster" id="maxcaprooster" placeholder="Max. capaciteit [dm3/s]"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsgebied"></td>
                        <td><input class="inputtext" type="text" name="" placeholder="Verblijfsruimte"></td>
                        <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
                      </tr>
                    </tbody>
                  </table>
                </div>


              <div style="display:none;">
              <table id="sample_table_venr">
                <tr id="">
                  <td><input class="inputtext" type="text" name="" placeholder="Merk"> </td>
                  <td><input class="inputtext" type="text" name="lrooster" id="lrooster" placeholder="Lengte rooster"></td>
                  <td><input class="inputtext" type="text" name="" placeholder="Type rooster"></td>
                  <td><input class="inputtext" type="text" name="caprooster" id="caprooster" placeholder="Capaciteit [dm3/s]"></td>
                  <td><input class="inputtext" type="text" name="maxcaprooster" id="maxcaprooster" placeholder="Max. capaciteit [dm3/s]"></td>
                  <td><input class="inputtext" type="text" name="" placeholder="Verblijfsgebied"></td>
                  <td><input class="inputtext" type="text" name="" placeholder="Verblijfsruimte"></td>
                  <td><a class="btn btn-xs delete-record" data-id="1"><i class="glyphicon glyphicon-trash"></i></a></td>
               </tr>
             </table>
             </div>
          </div>
      </div>
      </table>

​

这是计算的JavaScript：

​

$('#lrooster, #caprooster').keyup(function(){
    var lrooster = parseFloat($('#lrooster').val());
    var caprooster = parseFloat($('#caprooster').val());

    $('#maxcaprooster').val(lrooster * caprooster );
});

​

如果链接的代码不能正常工作，下面是一个小提琴

提前谢谢！！

Answer 1

问题

#id**s必须是唯一的，重复的** #id**s无效

不要用#id克隆(或复制)任何元素。在OP (Original Post)中，每次添加一行时都会重复3个#id，它们是#lrooster、#caprooster和#maxcaprooster。当浏览器被指示找到一个#id时，它自然地假设只有一个#id需要查找，并且一旦找到第一个#id，它就会停止。这就是为什么第一行是唯一起作用的行。

解决方案

避免使用#id，而使用.class。如果您使用的是jQuery，这一点特别重要，因为它具有多功能性。事实上，如果您如此慷慨地使用#id，您很可能会阻碍代码的功能。

变化

升级

• jQuery 3.6.0 Slim
• 引导5.1.3CSS和JavaScript
• 引导图标1.8.3 CSS

Replacements

• .delegate()现在是.on()
• #ids现在是.classes。
• #lrooster，#caprooster和#maxcaprooster现在分别是.lrooster，.kaprooser和.maxkaprooster，每个都是type="number"
• confirm()现在是自举模态对话框
• 使用data-*来确定序列化#ids的索引位置是很多记账工作，所以现在它是分配给<tr>的单个.active类。
• BS类是在整个HTML中分配的。

详细信息在示例中有注释

​

// Hide button.remove of the first row
$('.remove').hide();

// Click button.add...
$('.add').on('click', function(e) {
  // Clone the first row of tbody
  let copy = $('tbody tr:first').clone(true, true);
  // Clear all of it's inputs
  copy.find('input').val('');
  // Reset number inputs to 0
  copy.find('[type="number"]').val('0');
  // Show button.remove 
  copy.find('.remove').show()
  // Add clone to tbody
  $('tbody').append(copy);
});

// Click button.remove...
$('.remove').on('click', function(e) {
  // Add .active to the <tr> that contains clicked button
  $(this).closest('tr').addClass('active');
});

// Click button.confirm...
$('.confirm').on('click', function(e) {
  // Remove tr.active
  $('.active').remove();
});

// Click button.close...
$('.close').on('click', function(e) {
  // Remove .active from <tr>
  $('tr').removeClass('active');
});

// Enter data in any number input...
$('[type="number"]').on('input', function() {
  /*
  Reference <tr> that contains input that the user is currently
  interacting with
  */
  const $row = $(this).closest('tr');
  // Convert the values of .lrooster and .kaprooster of current row
  let L = parseFloat($row.find('.lrooster').val());
  let K = parseFloat($row.find('.kaprooster').val());
  /*
  If the product of .lrooster and .kaprooster equals NaN, retrun 0
  otherwise the product
  */
  let rooster = NaN ? 0 : L * K;
  // Display result in .maxkaprooster
  $row.find('.maxkaprooster').val(rooster);
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" rel="stylesheet" />

<main class="container-fluid">
  <section class='row'>
    <menu class='d-flex flex-row-reverse mt-1 mb-1'>
      <button class="add btn btn-primary" style='width: max-content;'><i class="bi bi-plus-lg"></i> Toevoegen </button>
    </menu>
    <table class="posts table table-stripped">
      <thead class='table table-dark'>
        <tr>
          <th>Brand</th>
          <th>Grille Length</th>
          <th>Grille Type</th>
          <th>Capacity [dm³/s]</th>
          <th>Max. [dm³/s]</th>
          <th>Home</th>
          <th>Room</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" type="text"></td>
          <td><input name="lrooster" class="lrooster form-control" type="number" value='0'></td>
          <td><input class="form-control" type="text"></td>
          <td><input name="kaprooster" class="kaprooster form-control" type="number" value='0'></td>
          <td><input name="maxkaprooster" class="maxkaprooster form-control" type="number" readonly value='0'></td>
          <td><input class="form-control" type="text"></td>
          <td><input class="form-control" type="text"></td>
          <td><button class="remove btn btn-xs" data-bs-toggle="modal" data-bs-target="#modal"><i class="bi bi-trash3-fill"></i></button></td>
        </tr>
      </tbody>
    </table>

  </section>

  <aside id='modal' class="modal" tabindex="-1">
    <dialog class="modal-dialog" open>
      <article class="modal-content">
        <header class="modal-header">
          <h5 class="modal-title">Confirm Row Removal</h5>
          <button class="close btn" data-bs-dismiss="modal">X</button>
        </header>
        <section class="modal-body">
          <p>Ventilatierooster verwijderen?</p>
        </section>
        <footer class="modal-footer">
          <button class="close btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="confirm btn btn-primary" data-bs-dismiss="modal">Remove Row</button>
        </footer>
      </article>
    </dialog>
  </aside>

</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

​

Answer 2

代码中的主要问题是在克隆的每一行的HTML中使用id属性。这会导致重复，这是无效的- id属性值必须是唯一的DOM。要解决此问题，请使用常见的class属性，按行为对元素进行分组。

尽管如此，您的代码中还有一些其他问题需要解决：

• 不要在运行时生成增量id属性。这是一种反模式，会导致更多的错误、额外的复杂性，并使代码更难以维护。用户公共类和DOM遍历方法，以便根据需要相互关联元素。
• 您使用的jQuery版本已经过时了。更新到3.6.0
• 引导也是过时的，但是我将把它作为OP更新的练习，因为迁移到v5中可能会有一些重大的变化。
• 不要对元素使用内联样式--使用样式表。
• 很久以前，delegate()就被jQuery拒绝了。使用on()代替。
• 使用input事件而不是keyup。后者不使用鼠标侦听添加到窗体控件中的内容，前者使用。
• 在可用的地方使用$变量，使代码更加简洁。如果有必要，可以通过document.ready处理程序对其进行别名。
• 使用<template />元素来存储HTML，该元素将用于在运行时创建动态内容。
• 给所有表单控件一个名称，即使您是通过AJAX提交表单。
• 使用data()访问data属性，而不是attr()。
• 为所有动态内容创建委托事件处理程序(即。lrooster和caprooster输入)

在纠正了所有这些问题之后，下面是一个工作示例：

​

jQuery($ => {
  let rowHtml = $('#sample_table_venr').html();
  let appendRow = () => $('#tbl_posts_body_venr').append(rowHtml);

  appendRow(); // add a row on page load

  $(document).on('click', 'a.add-record_venr', e => {
    e.preventDefault();
    appendRow(); // add a row on button click
  });

  $(document).on('click', 'a.delete-record', e => {
    e.preventDefault();

    if (confirm("Ventilatierooster verwijderen?")) {
      $(e.target).closest('tr').remove();
    }
  });

  $(document).on('input', '.lrooster, .caprooster', e => {
    let $row = $(e.target).closest('tr');
    let lrooster = parseFloat($row.find('.lrooster').val()) || 0;
    let caprooster = parseFloat($row.find('.caprooster').val()) || 0;
    $row.find('.maxcaprooster').val(lrooster * caprooster);
  });
});

.container-fluid {
  margin-left: 1px;
}

#tbl_posts_venr thead {
  background-color: #c7c8cc;
  width: 100% !important;
}

#tbl_posts_venr thead th:first-child {
  width: 30px;
}


/* only for this demo, to help the content fit in the snippet preview */
input {
  width: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="wellclearfix">
  <a class="btn btn-primary pull-right add-record_venr" data-added="0">
    <i class="glyphicon glyphicon-plus"></i> Toevoegen
  </a>
</div>
<div class="container-fluid">
  <table class="table table-stripped" id="tbl_posts_venr">
    <thead>
      <tr>
        <th>Merk</th>
        <th>Lengte rooster</th>
        <th>Type rooster</th>
        <th>Capaciteit [dm3/s]</th>
        <th>Max. capaciteit [dm3/s]</th>
        <th>Verblijfsgebied</th>
        <th>Verblijfsruimte</th>
        <th>Verwijderen</th>
      </tr>
    </thead>
    <tbody id="tbl_posts_body_venr"></tbody>
  </table>
</div>

<template id="sample_table_venr">
  <tr>
    <td><input class="inputtext" type="text" name="merk" placeholder="Merk"> </td>
    <td><input class="inputtext lrooster" type="text" name="lrooster" placeholder="Lengte rooster"></td>
    <td><input class="inputtext" type="text" name="typerooster" placeholder="Type rooster"></td>
    <td><input class="inputtext caprooster" type="text" name="caprooster" placeholder="Capaciteit [dm3/s]"></td>
    <td><input class="inputtext maxcaprooster" type="text" name="maxcaprooster" placeholder="Max. capaciteit [dm3/s]"></td>
    <td><input class="inputtext" type="text" name="verblijfsgebied" placeholder="Verblijfsgebied"></td>
    <td><input class="inputtext" type="text" name="verblijfsruimte" placeholder="Verblijfsruimte"></td>
    <td>
      <a class="btn btn-xs delete-record" data-id="1">
        <i class="glyphicon glyphicon-trash"></i>
      </a>
    </td>
  </tr>
</template>

​