如何将数组传递到最后一行的html表中

Question

我创建了一个点击功能的页面，在我表格的最后一列中创建一个新的column。

代码可以工作，但是它和我拥有的数组一样column。 我只想在我的上一个表column中制作一个column。

// 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>

您可以查看已发布的column我的代码段。那column不是我想要的。

我希望column是这样的：

1. WCB | 101 | 5006538574 | 10.08.2017 | 30.830 | KG | 37.500
2. WCB | 101 | 5006538574 | 10.08.2017 | 30.830 | KG | 37.500
3. WCB | 101 | 5006538574 | 10.08.2017 | 30.830 | KG | 37.500

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

Answer 1

Since you are already iterating over all <tr> elements in the outer loop, there's no need to do that again in conditional expressions. Instead, you should use currently iterated element ($(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>