How to iterate through a Bootstrap table and enter in values using JQuery
0
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
javascript jquery
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
add a comment |
0
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
javascript jquery
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
add a comment |
0
0
0
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
javascript jquery
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
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
javascript jquery
javascript jquery
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
asked Nov 22 '18 at 9:06
Jafar SalamiJafar Salami
8710
8710
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
0
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>answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
add a comment |
0
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
tdusing that classestd.classNamelike 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>answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
add a comment |
0
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>answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
add a comment |
0
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();
answered Nov 22 '18 at 9:52
ManiMani
34726
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427267%2fhow-to-iterate-through-a-bootstrap-table-and-enter-in-values-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
add a comment |
0
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>answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
add a comment |
0
0
0
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>answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
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>$(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>$(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>answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
answered Nov 22 '18 at 9:33
ChristheoreoChristheoreo
2218
2218
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
add a comment |
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
Thank you so much
– Jafar Salami
Nov 22 '18 at 9:38
add a comment |
0
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
tdusing that classestd.classNamelike 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>answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
add a comment |
0
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
tdusing that classestd.classNamelike 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>answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
add a comment |
0
0
0
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
tdusing that classestd.classNamelike 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>answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
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
tdusing that classestd.classNamelike 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>$(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>$(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>answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
answered Nov 22 '18 at 9:31
Just codeJust code
10.3k53066
10.3k53066
add a comment |
add a comment |
0
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>answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
add a comment |
0
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>answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
add a comment |
0
0
0
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>answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
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>$(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>$(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>answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
answered Nov 22 '18 at 9:43
Hamza HaiderHamza Haider
666315
666315
add a comment |
add a comment |
0
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();
answered Nov 22 '18 at 9:52
ManiMani
34726
add a comment |
0
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();
answered Nov 22 '18 at 9:52
ManiMani
34726
add a comment |
0
0
0
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();
answered Nov 22 '18 at 9:52
ManiMani
34726
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();
answered Nov 22 '18 at 9:52
ManiMani
34726
answered Nov 22 '18 at 9:52
ManiMani
34726
answered Nov 22 '18 at 9:52
ManiMani
34726
answered Nov 22 '18 at 9:52
ManiMani
34726
34726
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427267%2fhow-to-iterate-through-a-bootstrap-table-and-enter-in-values-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
