Javascript 如何使用JQuery迭代引导表并输入值_Javascript_Jquery

Javascript 如何使用JQuery迭代引导表并输入值

javascript jquery

Javascript 如何使用JQuery迭代引导表并输入值,javascript,jquery,Javascript,Jquery,我试图遍历一个引导表。我创建了if语句，以便获得所需的输出这是我想要的输出：但是，到目前为止，“打印成本”和“纸张成本”列中没有显示任何值，但如果去掉第二行，这些值将显示在第一行我的HTML： <div class="card"> <div class="card-header">Latest Print Jobs</div> <div class="card-body" sty

我试图遍历一个引导表。我创建了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>

我对我的问题的回答是

你遗漏了一些东西首先，您需要了解范围，您正在迭代tr，您需要找到其中的值。您无需再次查看该表，您将

$（this）

作为tr，在其中查找并获取值

颜色是第8个索引，而不是第7个索引

推荐方法：

您应该在服务器端执行此计算
您应该向每一行添加类，并使用该类找到
```
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");
    }
  });
});

演示：

$（文档）.ready（函数（）{
$（“tr”）。每个（函数（）{
var paper_size=$（this）.find（“td:nth child（4）”）.text（）；
var paper_type=$（this）.find（“td:nth child（5）”）.text（）；
var single_或_double=$（this）.find（“td:nth child（6）”）.text（）；
var color=$（this.find（“td:nth child（8）”）.text（）；
var print_cost=$（this）.find（“td:nth child（11）”；
var paper_成本=$（this）.find（“td:nth child（12）”；
调试器；
如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A4”&&
颜色==“黑白”
) {
$（打印成本）。文本（“0.5”）；
美元（纸张成本）。文本（“0.35”）；
}否则如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A4”&&
颜色==“颜色”
) {
$（打印成本）。文本（“2.5”）；
美元（纸张成本）。文本（“0.35”）；
}否则如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A3”&&
颜色==“黑白”
) {
$（打印成本）。文本（“0.1”）；
美元（纸张成本）。文本（“0.6”）；
}否则如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A3”&&
颜色==“颜色”
) {
$（打印成本）。文本（“0.5”）；
美元（纸张成本）。文本（“0.6”）；
}
});
});

最新印刷作业
#
员工姓名
工作编号
纸张尺寸
纸张类型
单面或双面
量
颜色
日期
编辑
印刷成本
纸张成本
总价
14
贾法尔
六氯环己烷
A3
西里奥·佩拉
单身
9
黑白
2018-11-21 16:05:29 
15
贾法尔
六氯环己烷099
A4
西里奥·佩拉
单身
9
黑白
2018-11-21 16:20:22 
我稍微修改了您的代码。
我已更改了您的$。每个循环和变量

$（文档）.ready（函数（）{
var table=document.getElementById（“主表”）；
$（“#主表tr”）。每个（函数（i，行）{
var$行=$（行）；
var paper_size=$row.find（“td:nth-child（4）”）.text（）；
var paper_type=$row.find（“td:nth child（5）”）.text（）；
var single_或_double=$row.find（“td:nth child（6）”）.text（）；
var color=$row.find（“td:nth child（8）”）.text（）；
var print_cost=$row.find（`td:nth child（11）`）；
var纸张成本=$row.find（“td:n子项（12）”）；
如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A4”&&
颜色==“黑白”
) {
$（打印成本）。文本（“0.5”）；
美元（纸张成本）。文本（“0.35”）；
}否则如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A4”&&
颜色==“颜色”
) {
$（打印成本）。文本（“2.5”）；
美元（纸张成本）。文本（“0.35”）；
}否则如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A3”&&
颜色==“黑白”
) {
$（打印成本）。文本（“0.1”）；
美元（纸张成本）。文本（“0.6”）；
}否则如果(
纸张类型==“Sirio Perla”&&
纸张大小==“A3”&&
颜色==“颜色”
) {
$（打印成本）。文本（“0.5”）；
美元（纸张成本）。文本（“0.6”）；
}
});
});

所以
最新印刷作业
#
员工姓名
工作编号
纸张尺寸
纸张类型
s
$(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");
    }
  });
});

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