<tbody>
<tr class="th">
<td>
this is a heead
</td>
<td>
</td>
</tr>
<tr>
<td>
Half Pallets
</td>
<td>4 Full Pallet
</td>
</tr>
<tr>
<td>
<td>4 Full Pallet
</td>
</tr>
</tbody>
Take a look,Suppose i want to add the tr for first tr.th then I want to set them on last tr then first tr.th but how I can do.
If their is multiple tr.th in table then I need to set the tr from last from second tr.th in my case.
Could you show me how I can do this.
thanks
Assuming you have some HTML like so:
<table>
<tbody>
<tr class="th">
<td>Some header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
<tr class="th">
<td>Another header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
</tbody>
</table>
Then I assume you want the resultant HTML to look like this:
<table>
<tbody>
<tr class="th">
<td>Some header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
<tr>
<td>A new bit of data in a new row</td>
</tr>
<tr class="th">
<td>Another header</td>
</tr>
<tr>
<td>Some data</td>
</tr>
<tr>
<td>Some more data</td>
</tr>
</tbody>
</table>
In that case, you could use the following jQuery:
var headerRows = $('tr.th');
if(headerRows.length > 1) {
var headerRow = headerRows.get(1);
$(headerRow).before('<tr><td>A new bit of data in a new row</td></tr>');
}
else if(headerRows.length == 1) {
var headerRow = headerRows.get(0);
$(headerRow).closest('tbody').append('<tr><td>A new bit of data in a new row</td></tr>');
}
else {
// no header rows - do nothing?
}
Working DEMO
Or, a fiddle that adds a new row before the next <tr> element with the class th when a <tr> element with the class th is clicked on: Updated DEMO
you could do (i intended that you want to add a new <tr> to the end of the table: if the last <tr> has the class th you want to add the new <tr> before the <tr class="th"> :
//get the last tr
var trLast = $('tr:last');
//create a tr to add
var trToAdd = $('<tr>');
//if the last tr has the class th
if(trLast.hasClass('th'){
//add the new tr before the last
trLast.before(trToAdd);
}else{
//add the new tr after the last
trLast.after(trToAdd);
}
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>
When the user clicks on the 'Number' column I want to be able to get the 'Name' column value in the same row. So for example if I clicked on '999' I would want to be able to get David.
$('#table').on('click', 'td:nth-child(2)', function()
{
row = $(this).text();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can use $(this).closest('tr').find('td:first').text() to get the closest first td and its text.
If the wanted item is inside of the tr but you dont know the place or you want it dynamically, you can add a class or id to the name td and change the code to this $(this).closest('tr').find('#WantedRowId').text()
$('#table').on('click', 'td:nth-child(2)', function() {
alert($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can find below a more appropriate solution that dynamically checks what is the "Name" column index and retrieves accordingly.
As such, if you insert other columns, like ID and what not, it'll still work without updating this specific logic.
$('#table').on('click', 'td:nth-child(2)', function()
{
$td = $(this);
indexCol = $td.closest('table').find('td:contains(Name)').index()
alert( $td.closest('tr').find('td').eq(indexCol).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
I need to split one table row into multiple row when calling a js function
This is the table:
<table id="tab_calc">
<tr class="tr_calc">
<td>Sub Total</td>
<td>Tax</td>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
<td>Total</td>
<td>Amt Paid</td>
<td>Bal Due</td>
</tr>
I want to make it look like this after I call a function:
<table id="tab_calc">
<tr>
<td>Sub Total</td>
</tr>
<tr>
<td>Tax</td>
</tr>
<tr>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
</tr>
<tr>
<td>Total</td>
</tr>
<tr>
<td>Amt Paid</td>
</tr>
<tr>
<td>Bal Due</td>
</tr>
</table>
Try below code:
fiddler
$(document).ready(function(){
$('.tr_calc').replaceWith( $('.tr_calc').html()
.replace(/<td>/gi, "<tr> <td>")
.replace(/<\/td>/gi, "</td></tr>")
);
});
I would like to unify two tables in JavaScript.
I am doing this because one table contains the other table's headers.
Or maybe there is any other way to do so?
I have:
<table>
<tr>
<td>ID</td>
<td>Model</td>
<td>Brand</td>
</tr>
</table>
And
<table>
<tr>
<td>1</td>
<td>BMW</td>
<td>320</td>
</tr>
<tr>
<td>2</td>
<td>Audi</td>
<td>A4</td>
</tr>
<tr>
<td>3</td>
<td>Some_kind_of_car</td>
<td>Very_long_name_to_exist</td>
</tr>
</table>
Thing is that column width in table two is defined by the length of input text there.
And I need it that header length would be the same of table one.
In javaScript
var innerTable = document.getElementById('myTable');
var headerTable = document.getElementById('header');
var totalColumn = headerTable.rows[0].cells.length;
for (var i = 0; i < totalColumn; i++) {
var innerTableWidth = innerTable.rows[0].cells[i].offsetWidth
var headerTableWidth = headerTable.rows[0].cells[i].offsetWidth
if (innerTableWidth < headerTableWidth)
innerTable.rows[0].cells[i].width = headerTableWidth;
else
headerTable.rows[0].cells[i].width = innerTableWidth;
}
HTML is
<table id="header">
<tr>
<td>ID</td>
<td>Model</td>
<td>Brand</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>BMW</td>
<td>320</td>
</tr>
<tr>
<td>2</td>
<td>Audi</td>
<td>A4</td>
</tr>
<tr>
<td>3</td>
<td>Some_kind_of_car</td>
<td>Very_long_name_to_exist</td>
</tr>
</table>
SEE DEMO HERE
I am using an user control in asp.net in which I am creating a html table from code behind. Initial structure is given below.
<table>
<tr>
<td>Property1</td>
<td>Property2</td>
<td>Property3</td>
<td>Property4</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
</tr>
</table>
My problem is I want to restructure it according to the size of container it is going to be placed [as it is a user control]. For Ex If width of each cell is 20px and container width is 40px then structure will be as given below;
<table>
<tr>
<td>Property1</td>
<td>Property2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
<table>
<tr>
<td>Property3</td>
<td>Property4</td>
</tr>
<tr>
<td>Value3</td>
<td>Value4</td>
</tr>
</table>
Thanks for the suggestion #user2167382.
Finally I have solved it though I had to use jquery.
Below is my html.
<table id="sourceT">
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1 - value</td>
<td>Col 2 - value</td>
<td>Col 3 - value</td>
</tr>
</table>
<table id="targetT">
</table>
Here is the jquery logic.
var $target = $("#targetT");
$("#sourceT tr").each(function() {
var $tds = $(this).children(),
$row = $("<tr></tr>");
var i=1;
while(i<3)
{
alert(i) ; $row.append($tds.eq(i).clone()).appendTo($target);
i++;
}
});
Hope it will help somebody else.