如何遍历Bootstrap表并使用JQuery输入值

Question

I am trying to iterate through a bootstrap table. I have created if statements so I can get my desired output.

This is my desired output:

However, so far no value appears in the print cost and paper cost columns but the values appear on the first row if you take out the second row.

My HTML:

 <div class="card">
                <div class="card-header">Latest Print Jobs</div>

                <div class="card-body" style="padding:0px;">
                    <table class="table">
                        <thead>
                            <th>#</th>
                            <th>Employee Name</th>
                            <th>Job Number</th>
                            <th>Paper Size</th>
                            <th>Paper Type</th>
                            <th>Single or Doubled Sided</th>
                            <th>Quantity</th>
                            <th>Colour</th>
                            <th>Date</th>
                            <th>Edit</th>
                            <th>Print Cost</th>
                            <th>Paper Cost</th>
                            <th>Total Price</th>
                        </thead>
                        <tbody id="main-table">


                                      <tr>
                                       <td>14</td> 
                                        <td>Jafar</td> 
                                        <td>HCH_003</td> 
                                       <td>A3</td> 
                                        <td>Sirio Perla</td> 
                                         <td>Single</td> 
                                         <td>9</td> 
                                        <td>Black & White</td> 
                                         <td>2018-11-21 16:05:29</td> 
                                      <td> <a href="http://portal.test/prints/14" class="btn btn-default">Edit</a></td> 
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                      </tr>

                                      <tr>
                                       <td>15</td> 
                                        <td>Jafar</td> 
                                        <td>HCH_099</td> 
                                       <td>A4</td> 
                                        <td>Sirio Perla</td> 
                                         <td>Single</td> 
                                         <td>9</td> 
                                        <td>Black & White</td> 
                                         <td>2018-11-21 16:20:22</td> 
                                      <td> <a href="http://portal.test/prints/15" class="btn btn-default">Edit</a></td> 
                                      <td></td>
                                      <td></td>
                                      <td></td>
                                      </tr>

                        </tbody>

                    </table>
                </div>
            </div>

My jQuery:

$(document).ready(function() {
  $("tr").each(function() {
    var paper_size = $("#main-table > tr > td:nth-child(4)").text();
    var paper_type = $("#main-table > tr > td:nth-child(5)").text();
    var single_or_double = $("#main-table > tr > td:nth-child(6)").text();
    var colour = $("#main-table > tr > td:nth-child(8)").text();
    var print_cost = $("#main-table > tr > td:nth-child(11)");
    var paper_cost = $("#main-table > tr > td:nth-child(12)");

    if (
      paper_type == "Sirio Perla" &&
      paper_size == "A4" &&
      colour == "Black & White"
    ) {
      $(print_cost).text("0.5");
      $(paper_cost).text("0.35");
    } else if (
      paper_type == "Sirio Perla" &&
      paper_size == "A4" &&
      colour == "Colour"
    ) {
      $(print_cost).text("2.5");
      $(paper_cost).text("0.35");
    } else if (
      paper_type == "Sirio Perla" &&
      paper_size == "A3" &&
      colour == "Black & White"
    ) {
      $(print_cost).text("0.1");
      $(paper_cost).text("0.6");
    } else if (
      paper_type == "Sirio Perla" &&
      paper_size == "A3" &&
      colour == "Colour"
    ) {
      $(print_cost).text("0.5");
      $(paper_cost).text("0.6");
    }
  });
});

my codepen to my problem is https://codepen.io/mrsalami/pen/QJQGjj

Answer 1

You are missing few things 1st you need to understand the scope, you are iterating through tr you need to find the values inside it. you do not need to go through the table again, you have $(this) as tr, find inside it and get the value.

Color is at the 8th index not 7

Recommended approaches:

• You should do this calculations on server side
• You should add class to each row and find the td using that classes td.className like this

Here is the updated code,

$(document).ready(function() {
  $("tr").each(function() { 
    var paper_size = $(this).find("td:nth-child(4)").text();
    var paper_type = $(this).find("td:nth-child(5)").text();
    var single_or_double = $(this).find("td:nth-child(6)").text();
    var colour = $(this).find("td:nth-child(8)").text();
    var print_cost = $(this).find("td:nth-child(11)");
    var paper_cost = $(this).find("td:nth-child(12)");
    debugger;
    if (
      paper_type == "Sirio Perla" &&
      paper_size == "A4" &&
      colour == "Black & White"
    ) {
      $(print_cost).text("0.5");
      $(paper_cost).text("0.35");
    } else if (
      paper_type == "Sirio Perla" &&
      paper_size == "A4" &&
      colour == "Colour"
    ) {
      $(print_cost).text("2.5");
      $(paper_cost).text("0.35");
    } else if (
      paper_type == "Sirio Perla" &&
      paper_size == "A3" &&
      colour == "Black & White"
    ) {
      $(print_cost).text("0.1");
      $(paper_cost).text("0.6");
    } else if (
      paper_type == "Sirio Perla" &&
      paper_size == "A3" &&
      colour == "Colour"
    ) {
      $(print_cost).text("0.5");
      $(paper_cost).text("0.6");
    }
  });
});

Demo:

 $(document).ready(function() { $("tr").each(function() { var paper_size = $(this).find("td:nth-child(4)").text(); var paper_type = $(this).find("td:nth-child(5)").text(); var single_or_double = $(this).find("td:nth-child(6)").text(); var colour = $(this).find("td:nth-child(8)").text(); var print_cost = $(this).find("td:nth-child(11)"); var paper_cost = $(this).find("td:nth-child(12)"); debugger; if ( paper_type == "Sirio Perla" && paper_size == "A4" && colour == "Black & White" ) { $(print_cost).text("0.5"); $(paper_cost).text("0.35"); } else if ( paper_type == "Sirio Perla" && paper_size == "A4" && colour == "Colour" ) { $(print_cost).text("2.5"); $(paper_cost).text("0.35"); } else if ( paper_type == "Sirio Perla" && paper_size == "A3" && colour == "Black & White" ) { $(print_cost).text("0.1"); $(paper_cost).text("0.6"); } else if ( paper_type == "Sirio Perla" && paper_size == "A3" && colour == "Colour" ) { $(print_cost).text("0.5"); $(paper_cost).text("0.6"); } }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="card-header">Latest Print Jobs</div> <div class="card-body" style="padding:0px;"> <table class="table"> <thead> <th>#</th> <th>Employee Name</th> <th>Job Number</th> <th>Paper Size</th> <th>Paper Type</th> <th>Single or Doubled Sided</th> <th>Quantity</th> <th>Colour</th> <th>Date</th> <th>Edit</th> <th>Print Cost</th> <th>Paper Cost</th> <th>Total Price</th> </thead> <tbody id="main-table"> <tr> <td>14</td> <td>Jafar</td> <td>HCH_003</td> <td>A3</td> <td>Sirio Perla</td> <td>Single</td> <td>9</td> <td>Black & White</td> <td>2018-11-21 16:05:29</td> <td> <a href="http://portal.test/prints/14" class="btn btn-default">Edit</a></td> <td></td> <td></td> <td></td> </tr> <tr> <td>15</td> <td>Jafar</td> <td>HCH_099</td> <td>A4</td> <td>Sirio Perla</td> <td>Single</td> <td>9</td> <td>Black & White</td> <td>2018-11-21 16:20:22</td> <td> <a href="http://portal.test/prints/15" class="btn btn-default">Edit</a></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> 

Answer 2

I have modified your code slightly. I have changed your $.each loop and variables.

 $(document).ready(function () { var table = document.getElementById("main-table"); $("#main-table tr").each(function (i, row) { var $row = $(row); var paper_size = $row.find("td:nth-child(4)").text(); var paper_type = $row.find("td:nth-child(5)").text(); var single_or_double = $row.find("td:nth-child(6)").text(); var colour = $row.find("td:nth-child(8)").text(); var print_cost = $row.find(`td:nth-child(11)`); var paper_cost = $row.find("td:nth-child(12)"); if ( paper_type == "Sirio Perla" && paper_size == "A4" && colour == "Black & White" ) { $(print_cost).text("0.5"); $(paper_cost).text("0.35"); } else if ( paper_type == "Sirio Perla" && paper_size == "A4" && colour == "Colour" ) { $(print_cost).text("2.5"); $(paper_cost).text("0.35"); } else if ( paper_type == "Sirio Perla" && paper_size == "A3" && colour == "Black & White" ) { $(print_cost).text("0.1"); $(paper_cost).text("0.6"); } else if ( paper_type == "Sirio Perla" && paper_size == "A3" && colour == "Colour" ) { $(print_cost).text("0.5"); $(paper_cost).text("0.6"); } }); }); 

 <!DOCTYPE html> <html lang="en"> <head> <title>SO</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> </head> <body> <div class="card"> <div class="card-header">Latest Print Jobs</div> <div class="card-body" style="padding:0px;"> <table class="table"> <thead> <th>#</th> <th>Employee Name</th> <th>Job Number</th> <th>Paper Size</th> <th>Paper Type</th> <th>Single or Doubled Sided</th> <th>Quantity</th> <th>Colour</th> <th>Date</th> <th>Edit</th> <th>Print Cost</th> <th>Paper Cost</th> <th>Total Price</th> </thead> <tbody id="main-table"> <tr> <td>14</td> <td>Jafar</td> <td>HCH_003</td> <td>A3</td> <td>Sirio Perla</td> <td>Single</td> <td>9</td> <td>Black & White</td> <td>2018-11-21 16:05:29</td> <td> <a href="http://portal.test/prints/14" class="btn btn-default">Edit</a></td> <td></td> <td></td> <td></td> </tr> <tr> <td>15</td> <td>Jafar</td> <td>HCH_099</td> <td>A4</td> <td>Sirio Perla</td> <td>Single</td> <td>9</td> <td>Black & White</td> <td>2018-11-21 16:20:22</td> <td> <a href="http://portal.test/prints/15" class="btn btn-default">Edit</a></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="js/index.js"></script> </body> </html> 

Answer 3

You were selecting

$("#main-table > tr > td:nth-child()")

which was wrong it will select child of both td at once it should iterate with the current object to find out the specific td one by one. It should be with this to get the current td. Like

$(this).find("td:nth-child()")

 $(document).ready(function(){ $("tr").each(function() { var paper_size = $(this).find("td:nth-child(4)").text(); var paper_type = $(this).find("td:nth-child(5)").text(); var single_or_double = $(this).find("td:nth-child(6)").text(); var colour = $(this).find("td:nth-child(8)").text(); var print_cost = $(this).find("td:nth-child(11)"); var paper_cost = $(this).find("td:nth-child(12)"); if (paper_type == "Sirio Perla" && paper_size == "A4" && colour == "Black & White") { $(print_cost).text('0.5'); $(paper_cost).text('0.35'); }else if (paper_type == "Sirio Perla" && paper_size == "A4" && colour == "Colour"){ $(print_cost).text('2.5'); $(paper_cost).text('0.35'); }else if (paper_type == "Sirio Perla" && paper_size == "A3" && colour == "Black & White"){ $(print_cost).text('0.1'); $(paper_cost).text('0.6'); }else if (paper_type == "Sirio Perla" && paper_size == "A3" && colour == "Colour"){ $(print_cost).text('0.5'); $(paper_cost).text('0.6'); } }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card"> <div class="card-header">Latest Print Jobs</div> <div class="card-body" style="padding:0px;"> <table class="table"> <thead> <th>#</th> <th>Employee Name</th> <th>Job Number</th> <th>Paper Size</th> <th>Paper Type</th> <th>Single or Doubled Sided</th> <th>Quantity</th> <th>Colour</th> <th>Date</th> <th>Edit</th> <th>Print Cost</th> <th>Paper Cost</th> <th>Total Price</th> </thead> <tbody id="main-table"> <tr> <td>14</td> <td>Jafar</td> <td>HCH_003</td> <td>A3</td> <td>Sirio Perla</td> <td>Single</td> <td>9</td> <td>Black & White</td> <td>2018-11-21 16:05:29</td> <td> <a href="http://portal.test/prints/14" class="btn btn-default">Edit</a></td> <td></td> <td></td> <td></td> </tr> <tr> <td>15</td> <td>Jafar</td> <td>HCH_099</td> <td>A4</td> <td>Sirio Perla</td> <td>Single</td> <td>9</td> <td>Black & White</td> <td>2018-11-21 16:20:22</td> <td> <a href="http://portal.test/prints/15" class="btn btn-default">Edit</a></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> 

Answer 4

var paper_size = $("#main-table > tr > td:nth-child(4)").text(); //It can be get all the 4th column data and produce the output (A3A4).So if condition as false

var paper_size = $(this).find('td').eq(3).text();// the output is (A3)
var paper_type = $(this).find('td').eq(4).text();
var colour = $(this).find('td').eq(7).text();