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

Question

我正在尝试遍历引导表。我创建了if语句，以便获得所需的输出。

这是我想要的输出：

但是，到目前为止，如果您除去第二行，则在“打印成本”和“纸张成本”列中均未显示任何值，但这些值显示在第一行中。

我的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>

我的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");
    }
  });
});

我的问题的Codepen是https://codepen.io/mrsalami/pen/QJQGjj

Answer 1

您缺少一些东西 首先，您需要了解范围，然后遍历tr并查找其中的值。您无需再次浏览表格，您将$(this)设为tr，在表格中查找并获取值。

颜色在第8个索引处而不是7

推荐方法：

• 您应该在服务器端进行此计算
• 您应该将类​​添加到每一行，并像这样使用类td找到td.className

这是更新的代码，

$(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");
    }
  });
});

演示：

$(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

我已经稍微修改了您的代码。 我已经更改了您的$.each循环和变量。

$(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

您正在选择

  

$（“＃main-table> tr> td：nth-​​child（）”）

这是错误的，它将立即选择两个td的子对象，并且应该与当前对象进行迭代以逐一找出特定的td。应该使用 this 来获取当前的td。 像

  

$（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();