javascript - 如何将数组传递到html表格最后一行

Question

我制作了一个页面，该页面具有单击功能即可在表格的最后一列中创建一个新的列。

该代码可以工作，但它生成的列与我拥有的数组一样多。我只想在我的最后一个表列中创建一个列。

// JavaScript Document
$(document).ready(function() {

  $('#display_data').on("click", function(e) {
    var myTableArray = [];
    $(".table-bordered tr").each(function() {
      var tdValue = ($(this).find("td:eq(4)").text());
      var a = 1.000;
      var b = 10.000;
      var c = 20.000;
      var d = 45.000;

      var callback1 = '10.000';
      var callback2 = '20.000';
      var callback3 = '37.500';
      var callback4 = '45.000';
      if (tdValue > a && tdValue < b) {
        $('.table-bordered').find('tr').each(function() {
          $(this).find('td').eq(5).after('<td>' + callback1 + '</td>');
        });
      } else if (tdValue > b && tdValue <= c) {
        $('.table-bordered').find('tr').each(function() {
          $(this).find('td').eq(5).after('<td>' + callback2 + '</td>');
        });
      } else if (tdValue > c && tdValue <= d) {
        $('.table-bordered').find('tr').each(function() {
          $(this).find('td').eq(5).after('<td>' + callback3 + '</td>');
        });
      } else {
        $('.table-bordered').find('tr').each(function() {
          $(this).find('td').eq(5).after('<td>' + callback4 + '</td>');
        });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td>WCB</td>
      <td>101</td>
      <td>5006538574</td>
      <td>10.08.2017</td>
      <td>30.830</td>
      <td>KG</td>
    </tr>
    <tr>
      <td>WCB</td>
      <td>101</td>
      <td>5006539622</td>
      <td>10.08.2017</td>
      <td>21.080</td>
      <td>KG</td>
    </tr>
    <tr>
      <td>WCB</td>
      <td>101</td>
      <td>5006539759</td>
      <td>10.08.2017</td>
      <td>40.990</td>
      <td>KG</td>
    </tr>
  </tbody>
</table>
<button type="submit" id="display_data" class="btn btn-primary">Upload File</button>

您可以查看我制作的专栏片段。该列不是我想要的。

我希望列像这样:

1. WCB | 101 | 101 5006538574 | 2017 年 8 月 10 日 | 30.830 |公斤 | 37.500
2. WCB | 101 | 101 5006538574 | 2017 年 8 月 10 日 | 30.830 |公斤 | 37.500
3. WCB | 101 | 101 5006538574 | 2017 年 8 月 10 日 | 30.830 |公斤 | 37.500

我希望有人能帮助我解决我的问题。

Answer 1

因为您已经迭代了所有 <tr>外循环中的元素，无需在条件表达式中再次执行此操作。相反，您应该使用当前迭代的元素( $(this) ):

// JavaScript Document
$(document).ready(function() {

  $('#display_data').on("click", function(e) {
    var myTableArray = [];
    $(".table-bordered tr").each(function() {
      var tdValue = ($(this).find("td:eq(4)").text());
      var a = 1.000;
      var b = 10.000;
      var c = 20.000;
      var d = 45.000;

      var callback1 = '10.000';
      var callback2 = '20.000';
      var callback3 = '37.500';
      var callback4 = '45.000';
      if (tdValue > a && tdValue < b) {
        $(this).find('td').eq(5).after('<td>' + callback1 + '</td>');
      } else if (tdValue > b && tdValue <= c) {
        $(this).find('td').eq(5).after('<td>' + callback2 + '</td>');
      } else if (tdValue > c && tdValue <= d) {
        $(this).find('td').eq(5).after('<td>' + callback3 + '</td>');
      } else {
        $(this).find('td').eq(5).after('<td>' + callback4 + '</td>');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tbody>
    <tr>
      <td>WCB</td>
      <td>101</td>
      <td>5006538574</td>
      <td>10.08.2017</td>
      <td>30.830</td>
      <td>KG</td>
    </tr>
    <tr>
      <td>WCB</td>
      <td>101</td>
      <td>5006539622</td>
      <td>10.08.2017</td>
      <td>21.080</td>
      <td>KG</td>
    </tr>
    <tr>
      <td>WCB</td>
      <td>101</td>
      <td>5006539759</td>
      <td>10.08.2017</td>
      <td>40.990</td>
      <td>KG</td>
    </tr>
  </tbody>
</table>
<button type="submit" id="display_data" class="btn btn-primary">Upload File</button>