I have different tables on a webpage, but would like to trigger Ajax (in this case, updating the columns of a table) only on a particular table.
Actually, learning the way to apply the action to 'everything but class X' would be just as nice as to find out how to apply the action 'only to class X'.
Example code:
<table class="currtable1">
<thead>
<td colspan="5">
Table 1
<SELECT name="menu">
<option value="eur">EUR</option>
<option value="thb">THB</option>
<option value="btc">BTC</option>
<option value="eth">ETH</option>
<option value="xmr">XMR</option>
</SELECT>
</td>
</thead>
<tbody>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
</tbody>
</table>
<hr>
<table class="currtable2">
<thead>
<td colspan="5">
Table 2
</td>
</thead>
<tbody>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
</tbody>
</table>
Javascript (I try to update only "currtable2" when the selection changes, but it doesn't work that way):
$(document).on('change', "table.currtable2 thead select", function() {
var index = $('option:selected',this).index()+1;
console.log(index)
$('table tbody tr').each(function() {
$(this).find("td").hide();
$(this).find("td:nth-child("+index+")").show();
});
});
JsFiddle: https://jsfiddle.net/jsrookey/z8pj7dns/2/
Change select by adding class
for example:
<SELECT name="menu" class="menu">
<option value="eur">EUR</option>
<option value="thb">THB</option>
<option value="btc">BTC</option>
<option value="eth">ETH</option>
<option value="xmr">XMR</option>
</SELECT>
</td>
in javascript
$( document ).ready(function() {
$(".menu").change(function(){
// your logic here
});
});
Correct way to only update one of both tables:
$(document).on('change', 'table thead select', function() {
var index = $('option:selected',this).index()+1;
$('table.currtable1 tbody tr').each(function() {
$(this).find("td").hide();
$(this).find("td:nth-child("+index+")").show();
});
});
Related
I'm trying to change the format of a predefined table. I do not have access to the HTML, only CSS and JS.
Basically what I want is to move every tr except the first into the first tr's td with class="field_3".
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
I have managed to make a working script by targeting the tr's id directly:
var rows = $("#unique_id_2, #unique_id_3, #unique_id_4");
$("#unique_id_1 > td.field_3").append(rows);
But I need a way to select them programmatically as their id are being generated uniquely.
After searching and trying for days I have not managed to wrap my head around this.
So any insight to help solve this would be greatly appreciated.
Edit: Added another snippet with more rows which adds to the complexity of the solution.
<table style="border: 1px solid black;">
<tbody >
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
<tr class="group">
<td></td>
</tr>
<tr id="unique_id_5">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 2</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_6">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_7">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_8">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
Regards,
Espen
You can try this
$( document ).ready(function() {
var firstTr = $("tr:first-child").attr("id");
var rows =$("#"+firstTr ).nextAll();
$("tr:first-child td:last-child").append(rows);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="border: 1px solid black;">
<tbody >
<tr id="unique_id_1">
<td class="field_1"><span class="col-1">Item</span></td>
<td class="field_2">No 1</td>
<td class="field_3"></td>
</tr>
<tr id="unique_id_2">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 1</td>
</tr>
<tr id="unique_id_3">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 2</td>
</tr>
<tr id="unique_id_4">
<td class="field_1"></td>
<td class="field_2"></td>
<td class="field_3">Action 3</td>
</tr>
</tbody>
</table>
It will handle any length of table and if it solves your problem don't forget to vote and accept the answer
I have a short form in HTML and basically it calculates the results of the users input. I have 4 sections, section a.1, a.2, b.1, b.2. I want to be able to add sum of section a.1 and display it on the subtotal line, same goes for section a.2, b.1 and b.2. Lastly I would like to sum up the total points awarded and display it in the totals row on the summary table at the top of the page. Please run my code and any advice or code snippets is appreciated. I would like to maintain the structure of my code. I am new to javascript and would love some advice to help build my understanding. Thanks!
var sections = {
section_a: 0,
section_b: 0,
}
//Calculates Section A
function calcSectionA(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
calcRanks();
}
//Calculates Section B
function calcSectionB(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
calcRanks();
}
function calcRanks() {
let sectionsArr = [];
let keys = Object.keys(sections);
keys.forEach((key, i) => {
sectionsArr.push({
section: key,
value: sections[key],
rank: 0
});
if (i + 1 === keys.length) {
sectionsArr.sort((a, b) => {
return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
});
let lastIndex = 0;
for (let i = 1; i < sectionsArr.length; i++) {
let section = sectionsArr[i];
let lastSection = sectionsArr[lastIndex];
//console.log(lastSection.value, section.value);
if (lastSection.value > section.value) {
sectionsArr[i].rank = lastSection.rank + 1;
}
if (lastSection.value === section.value) {
sectionsArr[i].rank = lastSection.rank;
}
lastIndex = i;
}
displayRanks(sectionsArr);
}
});
}
function displayRanks(sections) {
sections.forEach((section) => {
document.getElementById('rank_' + section.section).textContent = section.rank + 1;
});
}
<table>
<tr>
<th>Category</th>
<th>Points Possible</th>
<th>Points Awarded</th>
<th>Percent Achieved</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">60</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">50</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="right"><b>Totals=</b></td>
<td align="center"><b></b></td>
<td align="center"><b><div></div></b></td>
<td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
<td align="center"></td>
</tr>
</table>
<table>
<th>Section A.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<th>Section A.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_a"></div></b></td>
</tr>
<th>Section B.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<th>Section B.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<tr class="blueHead">
<td class="subtotal">Section B. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_b"></div></b></td>
</tr>
</table>
I gave a number of your div and some span tag id attributes. In your onchange functions, I just grabbed the values of the ddls and sum them up for the individual totals for A and B sections. Then at the top of the table, I just grabbed the two numbers and summed those as well in your onchange function so every time you change a value, the sum will update. This isn't the best way to give your elements values, but this should help get you on the right track. Hopefully this helps
var sections = {
section_a: 0,
section_b: 0,
}
//Calculates Section A
function calcSectionA(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
calcRanks();
var a1Q1 = document.getElementById('a1').value;
var a1Q2 = document.getElementById('a2').value;
document.getElementById('section_a1subTotal').textContent = parseInt(a1Q1) + parseInt(a1Q2);
var a2Q1 = document.getElementById('a3').value;
var a2Q2 = document.getElementById('a4').value;
document.getElementById('section_a2subTotal').textContent = parseInt(a2Q1) + parseInt(a2Q2);
var aTotals = document.getElementById('summary_section_a').textContent;
var bTotals = document.getElementById('summary_section_b').textContent;
if (aTotals !== "" && bTotals !== "") {
document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
}
}
//Calculates Section B
function calcSectionB(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
calcRanks();
var b1Q1 = document.getElementById('b1').value;
var b1Q2 = document.getElementById('b2').value;
document.getElementById('section_b1subTotal').textContent = parseInt(b1Q1) + parseInt(b1Q2);
var b2Q1 = document.getElementById('b3').value;
var b2Q2 = document.getElementById('b4').value;
document.getElementById('section_b2subTotal').textContent = parseInt(b2Q1) + parseInt(b2Q2);
var aTotals = document.getElementById('summary_section_a').textContent;
var bTotals = document.getElementById('summary_section_b').textContent;
if (aTotals !== "" && bTotals !== "") {
document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
}
}
function calcRanks() {
let sectionsArr = [];
let keys = Object.keys(sections);
keys.forEach((key, i) => {
sectionsArr.push({
section: key,
value: sections[key],
rank: 0
});
if (i + 1 === keys.length) {
sectionsArr.sort((a, b) => {
return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
});
let lastIndex = 0;
for (let i = 1; i < sectionsArr.length; i++) {
let section = sectionsArr[i];
let lastSection = sectionsArr[lastIndex];
//console.log(lastSection.value, section.value);
if (lastSection.value > section.value) {
sectionsArr[i].rank = lastSection.rank + 1;
}
if (lastSection.value === section.value) {
sectionsArr[i].rank = lastSection.rank;
}
lastIndex = i;
}
displayRanks(sectionsArr);
}
});
}
function displayRanks(sections) {
sections.forEach((section) => {
document.getElementById('rank_' + section.section).textContent = section.rank + 1;
});
}
<table>
<tr>
<th>Category</th>
<th>Points Possible</th>
<th>Points Awarded</th>
<th>Percent Achieved</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">60</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">50</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="right"><b>Totals=</b></td>
<td align="center" id="totalNum"><b></b></td>
<td align="center"><b><div></div></b></td>
<td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
<td align="center"></td>
</tr>
</table>
<table>
<th>Section A.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="a2" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_a1subTotal"></div></b></td>
</tr>
<th>Section A.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="a3" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="a4" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_a2subTotal"></div></b></td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_a"></div></b></td>
</tr>
<th>Section B.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="b1" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="b2" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_b1subTotal"></div></b></td>
</tr>
<th>Section B.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="b3" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="b4" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_b2subTotal"></div></b></td>
</tr>
<tr class="blueHead">
<td class="subtotal">Section B. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_b"></div></b></td>
</tr>
</table>
jsfiddle: https://jsfiddle.net/q28yk4j0/1/
I currently have a multiple column table with one column being a column full of checkboxes. Whenever I check a checkbox, I want an extra cell to appear on the right side of the table. Currently, when I check a checkbox, it displays the entire column, but I am wanting it to only display the cell that is in the corresponding row.
How can I do this?
My PHP/HTML code:
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc"></td>
<td class="rp-code" align="center"></td>
<td class="sku"></td>
<td class="special-id" align="center"></td>
<td class="description"></td>
<td class="quantity" align="center"></td>
<td class="unit"></td>
<td style="display: none;" class="quantity_num"></td>
</tr>
<?php } ?>
</tbody>
</table>
My JavaScript Code:
$(function () {
$(".check").change(function(){
$("#merchTable th.num").toggle(this.checked);
$("#merchTable td.quantity_num").toggle(this.checked);
});
});
I have changed my code to make it work with a JSFiddle so you can see something for an example of what I currently have and what is going on:
https://jsfiddle.net/d8494316/
Change your JS code to this:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked)
});
});
Here's a snippet:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'))
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="merchTable" cellspacing="10" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="check"></td>
<td class="loc">Ex. 1</td>
<td class="rp-code" align="center">Ex. 2</td>
<td class="sku">Ex. 3</td>
<td class="special-id" align="center">Ex. 4</td>
<td class="description">Ex. 5</td>
<td class="quantity" align="center">Ex. 6</td>
<td class="unit">Ex. 7</td>
<td style="display: none;" class="quantity_num">Ex. 8</td>
</tr>
</tbody>
</table>
It's enough to change this line:
$("#merchTable td.quantity_num").toggle(this.checked);
to:
$(this).closest('td').nextAll(" td.quantity_num").toggle(this.checked);
In order to preserve the first column toggled if there are more than one checked element you can change:
$("#merchTable th.num").toggle(this.checked);
to:
$("#merchTable th.num").toggle($("#merchTable td.quantity_num:visible").length > 0);
This line must be added as last line.
Updated jsfiddle
I have a table like this.
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>
Then, whenever I change the value in <td>B select option , <td>F and <td>G will hide..
It will then move up belows <td>...
<td>J & <td>K to <td>F & <td>G ,
<td>N & <td>O to <td>J & <td>K ,
Opposite happens if <td>F and <td>G will be shown.. other <td> will move down
here is the jquery ive started.
$('select#B').change(function(event) {
if (this.value == '2') {
$(".sample").show();
} else {
$(".sample").hide();
}
});
http://jsfiddle.net/rucsh/40/
$('select#B').change(function(event) {
var clone = $('td.id1').clone();
var clone2 = $('td.id2').clone();
if (this.value == '2') {
$(".sample, td.id1, td.id2").show();
$('.clone').remove();
} else {
$(".sample, td.id1, td.id2").hide();
$(clone).insertAfter('.sample:last').addClass('clone');
$(clone2).insertAfter('.id1:last').addClass('clone');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>
High-level instructions,
Clone the target element you want to move
Save it variable
Remove the original element
Insert the cloned element (in step 2) to the desired location.
All above steps can be easily competed using jQuery.
I have drupal view that generate one table split to multiple table thead and tbody, I need to sum the total of the columns and rows per tbody and not for all the table
I have this code, see code here
HTML
<table id="sum_table" width="300" border="1">
<thead>
<tr class="titlerow">
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
</table>
CSS
#sum_table {
white-space: nowrap;
}
#sum_table td {
padding: 5px 10px;
}
JavaScript in onLoad
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
How can I sum total after every category?
Thanks a lot
Here is a FIDDLE that does most of what you want.
I just saw your comment about the totals after every tbody...I'll have to work on it a bit more. Still doable.
JS
var totrow = 0, totcol=0; //setting totalsforrow and totalsforcolumns variables to zero
$('.numrow').each( function(){ //for each of the rows with class='numrow'
for(var n=1; n<5; n++) //do a loop four times for the right column totals
{
totrow = totrow + parseInt( $(this).children("td:eq("+ n +")").text() );
} //grab the values of each of the four tds and add them together
$( $(this).children('td:eq(5)') ).html(totrow); //put the summed value in the 'total' td
totrow = 0; // reset the value for the next "each .numrow"
});
for(var m = 1; m < 5; m++) //for loop for four column totals
{
$('.numrow').each( function(){ // for each of the rows with class .numrow
totcol = totcol + parseInt($(this).children("td:eq("+ m +")").text() );//add up values
console.log(totcol); // just a view of the totcol printed to the console log
});
$( "#sum_table tr:eq(11) td:eq(" + m + ")" ).html( 'Col total: ' + totcol );//put total at bottom of column
totcol = 0; //reset total to get read for the next loop
}
Edit: Here's the update FIDDLE. It's brute-force, inelegant, but it works.