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

すでに外側のループにある<tr>のすべての要素を繰り返しているので、条件式でもう一度やり直す必要はありません。それだけでイムは再び `tr`を確認するためか、私はそれが` tr`の要素を繰り返し言うことができ

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