How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});
Why not:
$('td.column').on('click', function(){
alert("test");
});
Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
Related
At the click of the button #create-arrays I need to create multiple arrays. Each array will contain the set of tr (not .table-primary) present between the two tr (previous and next) with class table primary. this set of tr will be called context. Using jquery, how can I identify any such context and place it in an array? Thanks to everyone who will help.
HTML part (for testing):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<table class="table table-sm">
<thead>
</thead>
<tbody>
<tr class="table-primary">
<td colspan="2">Group 1</td>
</tr>
<tr>
<td>Name: Jonh</td>
<td>Surname: Doe</td>
</tr>
<tr>
<td>Name: Mark</td>
<td>Surname: Lon</td>
</tr>
<tr class="table-primary">
<td colspan="2">Group 2</td>
</tr>
<tr>
<td>Name: Will</td>
<td>Surname: Man</td>
</tr>
<tr>
<td>Name: Ben</td>
<td>Surname: Harper</td>
</tr>
<tr>
<td>Name: Mitch</td>
<td>Surname: Collins</td>
</tr>
<tr class="table-primary">
<td colspan="2">Group 3</td>
</tr>
<tr>
<td>Name: Serena</td>
<td>Surname: Mellin</td>
</tr>
<tr class="table-primary">
<td colspan="2">Group 4</td>
</tr>
<tr>
<td>Name: Nickolas</td>
<td>Surname: Malinof</td>
</tr>
<tr>
<td>Name: David</td>
<td>Surname: Benner</td>
</tr>
<tr>
<td>Name: Lenny</td>
<td>Surname: Doe</td>
</tr>
<tr>
<td>Name: Micheal</td>
<td>Surname: Pitzford</td>
</tr>
<tr>
<td>Name: Melania</td>
<td>Surname: Bebant</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
the jquery script that i use to get all the tr inside tbody.
$('#create-arrays').on('click', function(){
var context = [];
var a = $('#file_table_available tbody tr');
console.log(a);
for (let i = 0; i < a.length; i++) {
const element = a[i];
}
})
You're off to a good start looping over all rows in the table.
You could check each row (element in your snippet) for the existance of the table-primary class. If the row has this class, you know you have to create a new group.
Here's a vanilla javascript example. It outputs an array of groups. Each group contains 1 or more rows that belong together.
const rows = document.querySelectorAll("tr");
const groups = [];
let group = null;
for (const row of rows) {
if (row.classList.contains("table-primary")) {
group = [];
groups.push(group);
} else {
group.push(row);
}
}
console.log(groups);
<table class="table table-sm">
<thead>
</thead>
<tbody>
<tr class="table-primary">
<td colspan="2">Group 1</td>
</tr>
<tr>
<td>Name: Jonh</td>
<td>Surname: Doe</td>
</tr>
<tr>
<td>Name: Mark</td>
<td>Surname: Lon</td>
</tr>
<tr class="table-primary">
<td colspan="2">Group 2</td>
</tr>
<tr>
<td>Name: Will</td>
<td>Surname: Man</td>
</tr>
<tr>
<td>Name: Ben</td>
<td>Surname: Harper</td>
</tr>
<tr>
<td>Name: Mitch</td>
<td>Surname: Collins</td>
</tr>
<tr class="table-primary">
<td colspan="2">Group 3</td>
</tr>
<tr>
<td>Name: Serena</td>
<td>Surname: Mellin</td>
</tr>
<tr class="table-primary">
<td colspan="2">Group 4</td>
</tr>
<tr>
<td>Name: Nickolas</td>
<td>Surname: Malinof</td>
</tr>
<tr>
<td>Name: David</td>
<td>Surname: Benner</td>
</tr>
<tr>
<td>Name: Lenny</td>
<td>Surname: Doe</td>
</tr>
<tr>
<td>Name: Micheal</td>
<td>Surname: Pitzford</td>
</tr>
<tr>
<td>Name: Melania</td>
<td>Surname: Bebant</td>
</tr>
</tbody>
</table>
I want to merge two html table in jquery.I want to merge the table tbl1 and tbl2 and recreate a table joined.I just want to copy the tag not to cut the tag.need to have 3 tables
I have tried as
$('button').click(function(){
$('#tbl2 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl1 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl2 tbody tr').wrap('#joined tbody tr');
$('#tbl1 tbody tr').wrap('#joined tbody tr');
});
#joined{background:#ff0;margin-bottom:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>
<table id="joined"><thead><tr></tr><thead>
<tbody><tr></tr><tbody>
</table>
<table id="tbl1">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
<table id="tbl2">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
I need the html table as
<table id="joined">
<thead >
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
<th></th> <!-- empty cell -->
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
<td></td> <!-- empty cell -->
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
I have my markup like this
<table class="section-table">
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found">
<tr>
<td>data test</td>
</tr>
</tbody class="found">
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead>
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found">
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found">
<tr>
<td>data test</td>
</tr>
</tbody>
</table>
Now here you can see that in some thead there is class called found. Here in the tbody there is also some tbody has class found. Now I want in jQuery after the thead which has class found it will get the next first tbody which has class found tbody and add class first-row and the last tbody which has class found will be last-row. So basically the out put should be like
<table class="section-table">
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found first-row">
<tr>
<td>data test</td>
</tr>
</tbody class="found last-row">
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead>
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<thead class="found">
<tr>
<th>data 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found first-row">
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody>
<tr>
<td>data test</td>
</tr>
</tbody>
<tbody class="found last-row">
<tr>
<td>data test</td>
</tr>
</tbody>
</table>
I have tried this
jQuery('table.section-table').find('thead.found').each(function() {
jQuery(this).next('tbody.found').addClass('first-row');
jQuery(this).prev('tbody.found').addClass('last-row');
});
You have invalid html (a <table> can have multiple <tbody> elements, but only have one <thead> element. Because of that, you will not be able to use normal selectors such as
('tbody').siblings('tbody').first().addClass('first-row')
Instead you will need to loop each element to in the <table>
var foundFirst = false;
$('table').children('.found').each(function(index, item){
if ($(this).is('thead')) {
foundFirst = false; // reset for next set of tbody elements
} else {
if (!foundFirst) {
$(this).addClass('first-row')
foundFirst = true; // toggle
} else {
$(this).addClass('last-row')
}
}
})
Note the above assumes there will not be more that two <tbody class="found"> in the group following a <thead> element
just do this :
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).next().find('tbody.found:first').addClass('first-row');
jQuery(this).next().find('tbody.found:last').addClass('last-row');
});
I have several tables with the same structure. It has different values for the price. I want to get the running balance of the price column. So I want to get the sum and print each iteration in the running balance column. For example. In the Price column I have 400, 425 and 350 so in the running balance column, I should have 400, 825, 1175. Currently, I'm only getting the sum.
Here is my html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
here is my javascript
$('.runningBal').each(function() {
var sum = 0;
$(this).parents('table').find('.price').each(function() {
var floted = parseFloat($(this).text());
if (!isNaN(floted)) sum += floted;
$('.runningBal').html(sum);
})
//$(this).html(sum);
});
Here is the fiddle
Well people in the comments are right to say that if the product prices are constant, you should render it server-side while you loop.
Anyway, this will do the job :
$("table").each(function() {
var sum = 0;
$(this).find(".runningBal").each(function() {
sum += +$(this).prev(".price").text();
$(this).text(sum);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bacon</td>
<td class="price">1300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Pancakes</td>
<td class="price">300</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
<br>
<table class="table table-striped">
<thead>
<tr>
<th width="60%">Item</th>
<th width="20%">Price</th>
<th width="20%">Running Balance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fries</td>
<td class="price">400</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Nuggets</td>
<td class="price">425</td>
<td class="runningBal"></td>
</tr>
<tr>
<td>Ice Cream</td>
<td class="price">350</td>
<td class="runningBal"></td>
</tr>
<tr>
<td><b>Total:</b></td>
<td class="total"><b>$</b></td>
<td class="totalBal"></td>
</tr>
</tbody>
</table>
I am nesting tables within tables and want to toggle the them when you click on a <th class="folder">
$('table').each(function(){
$('th.folder', this).bind('click', function(){
$(this).closest('table').children('tbody').toggle();
});
});
Here is some typical HTML:
<table>
<thead>
<tr>
<th>Title</th>
<th class="type">Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<thead>
<tr>
<th class="folder" colspan="2">Deal flow</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>image</td>
</tr>
<tr>
<td>item 2</td>
<td>image</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th class="folder" colspan="2">Rejected deals</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 3</td>
<td>image</td>
</tr>
<tr>
<td>item 4</td>
<td>image</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Doesn't seem to work and I can't figure out why! Any ideas?
See Working Example
Try this instead:
$('.folder').bind('click', function(){
$(this).closest('table').children('tbody').toggle();
});
Your context is wrong, try just $('th.folder');
Also, I would use live() instead of bind() since live() is faster.