时间戳

首页 > 解决方案 > 如何遍历引导表并使用 JQuery 输入值

javascript - 如何遍历引导表并使用 JQuery 输入值

问题描述

我正在尝试遍历引导表。我已经创建了 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

标签： javascriptjquery

解决方案

我稍微修改了你的代码。我已经改变了你的$.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>

推荐阅读