Col Span Split For First td cell with table header - javascript

<table border="1">
<tr>
<th scope="col" colspan="1">Header</th>
<th scope="col" colspan="2" >Header</th>
<th scope="col" colspan="1">Header</th>
</tr>
<tr>
<td colspan="2">Col 3</td>
<td colspan="1">Col 1</td>
<td colspan="1">Col 2</td>
</tr>
</table>
From the above code i need to share first td with two th cells. how it is possible to share the first td cell to share with th if td colspan is greater than th colspan. I got error in first td cell only while sharing with two th headers?

Try This :
<table border="1">
<colgroup>
<col style="width:25%;" />
<col style="width:25%;" />
<col style="width:25%;" />
<col style="width:25%;" />
</colgroup>
<tr>
<th scope="col" colspan="1">Header</th>
<th scope="col" colspan="2" >Header</th>
<th scope="col" colspan="1">Header</th>
</tr>
<tr>
<td colspan="2">Col 3</td>
<td colspan="1">Col 1</td>
<td colspan="1">Col 2</td>
</tr>
</table>

The width of the td normally depends on the data in nth td of all rows.
<table border="1">
<tr>
<th>Month</th>
<th colspan="2">Savings</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<td>$100</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$8000</td>
</tr>
<tr>
<td colspan="4">Sum: $180</td>
</tr>
</table>

Related

How to delete table rows uisng javascript

I want to delete every row from the table using javascirpt Here's the code
I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}
Explination
This will get all tr (rows) for the tables body.
Then it will delete (remove) any that it finds
Solution
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});
Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>
If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
Try this way...
const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
tRow.remove();
}
try this code:
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr id = "row1">
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
<button onclick = "deletetr()">
Click here
</button>
<script>
function deletetr() {
document.getElementById("row1").remove();
}
</script>
</div>

Take data from a table to display as plain text

I want to take data from each row to display as simple text on the same page in a paragraph.
Example table below:
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
The output should look like:
A1 B1 C1 A2 B2 C2
I have tried look for the solution, but it is not working. I appreciate any help in advance.
Use document.querySelectorAll('td') to get all the td elements. Iterate over the elements using forEach loop and get their text using textContent. In the paragraph add this text using innerHTML
document.querySelector('#a').querySelectorAll('td').forEach((e)=>document.querySelector('#here').innerHTML+=e.textContent + " ")
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Using jquery, get all the td elements and iterate over them using each and append the text to the paragraph using append()
$('#a').find('td').each(function(i,e){
$('#here').append($(e).text() + " ")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="a">
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>
<p id="here"></p>
Try like this, using HTML DOM children Property
var dataTable = document.getElementsByTagName('table');
var dataTableBody = dataTable[0].children[1];
for (var i = 0; i < dataTableBody.length; i++) {
console.log(dataTableBody[i].innerHTML)
}
<table>
<thead>
<tr>
<th class="a header">A</th>
<th class="b header">B</th>
<th class="c header">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a">A1</td>
<td class="b">B1</td>
<td class="c">C1</td>
</tr>
<tr>
<td class="a">A2</td>
<td class="b">B2</td>
<td class="c">C2</td>
</tr>
</tbody>
</table>

How to prevent clicking on header column

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>

Get the running balance of several tables with JQuery

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>

Sorting multiple rows linked with one another (fiddle examples included)

How can I sort multiple rows (rows with colspan, linked to the targetted sort row) with sorttable.js
I have tried to slightly modify the source to support multiple rows, but it breaks the fundamental sorting of data contained in Array of row data. Here is the modified version of sorttable.js (my attempt at multiple rows)
What I'm trying to accomplish
<table id="data_table" class="sortable">
<colgroup>
<col clas="item1" />
<col class="item2" />
<col class="item3" />
</colgroup>
<thead>
<th class="item1">Item 1</th>
<th class="item2">Item 2</th>
<th class="item3">Item 3</th>
</thead>
<tbody>
<tr id="row-item-0" class="item_row" data-sorttable_row_key="0" data-sorttable_original="true" >
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-0-1" class="item_row" data-sorttable_row_key="0" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 1,2,3
</td>
</tr>
<tr id="row-item-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="true" >
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-1-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 4,5,6
</td>
</tr>
<tr id="row-item-2" class="item_row" data-sorttable_row_key="2" data-sorttable_original="true" >
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-2-1" class="item_row" data-sorttable_row_key="2" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 1,2,3
</td>
</tr>
<tr id="row-item-3" class="item_row" data-sorttable_row_key="3" data-sorttable_original="true" >
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-3-1" class="item_row" data-sorttable_row_key="3" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 4,5,6
</td>
</tr>
</tbody>
</table>
Sortable Multiple Rows (jsfiddle) (it looks like it works because it can carry the linked row with the sort, but it doesn't because the sort is completely incorrect)
Sortable Multiple Rows (using single rows, doesn't work) (jsfiddle)
Pastebin for Sortable Code used in above JSFiddles
What is supported
<table id="data_table" class="sortable">
<colgroup>
<col clas="item1" />
<col class="item2" />
<col class="item3" />
</colgroup>
<thead>
<tr>
<th class="item1 sorttable_alpha">Item 1</th>
<th class="item2 sorttable_alpha">Item 2</th>
<th class="item3 sorttable_alpha">Item 3</th>
</tr>
</thead>
<tbody>
<tr id="row-item-0" class="item_row">
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-1" class="item_row">
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-2" class="item_row">
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-3" class="item_row">
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
</tbody>
</table>
Sortable using the default code (jsfiddle)
Pastebin for above JsFiddle (contains slight modifications to original, for better ELEMENT support within cells).
Ideally what I'm looking for in the answer to this question is either:
library to do what I'm looking for,
solution to bug within my sorrtable.js modification.
You can avoid editing the sorttable.js script altogether.
Instead, create a click event on the table's thead, which moves the colspan rows into place after sorttable.js has sorted all the rows:
$('.sortable thead').click(function() {
var sortable = $(this).closest('.sortable');
sortable.find('tr:has(td[colspan])').each(function() {
var key = $(this).data('sorttable_row_key'),
link = sortable.find('tr:not(:has(td[colspan]))[data-sorttable_row_key=' + key + ']');
$(this).insertAfter(link);
});
});
I've used jQuery, since you linked to it in your Fiddle. If you prefer a vanilla JavaScript solution, let me know.
Working Fiddle

Categories