Load HTML content in a newly created table row - javascript

I've got a web page of very neatly structured data. There are about 20 "parents" and about 1000 "children". Right now I show a huge table of all the children. What I want to do is display the table of parents, and have a button/toggle for each row that when clicked would:
add a row beneath that parent in the table
execute a GET request to display an HTML table of children in that row
on the next click the button/toggle would remove that row from the table
My HTML looks like this:
<table id="tableofparents">
<tr>
<th>Buttons</th>
<th>Col B</th>
<th>Col C</th>
</tr>
<tr class="adder" id="101">
<td id="101" class="toggleChildren">Button</td> # unique id per row already exists
<td>Info Field 1</td>
<td>Info Field 2</td>
</tr>
<tr class="adder" id="202">
<td id="202" class="toggleChildren">Button</td>
<td>Info Field 1</td>
<td>Info Field 2</td>
</tr>
</table>
I figured out the code to toggle creation/deletion of a new table row here from here - Toggle between the creation and destruction of a table row jquery
<script type="text/javascript">
$(document).ready(function()
{
$('#tableofparents').on('click', ".toggleChildren", function () {
var thisRow = $(this).parents('tr.adder');
var hasNextRow = thisRow.next('tr.added').length;
if (hasNextRow) {
thisRow.next('tr.added').remove();
} else {
$(this).parents('tr.adder').after('<tr class="added"><td colspan="3" >This is where I want to load the HTML of the children via a GET request</td></tr>');
}
});
}
</script>
When I click on the button in the first row, it now toggles the addition of a new table row. But I also need that same click to execute a GET request to http://example.com/childdata?id=101 and load the HTML from that request into the new row, and I just can't figure out how to do that.
Is there a way to load HTML into the newly created row?

In your else statement you can do this:
var parent = $(this).parents('tr.adder'), id = parent.attr('id');
$.get('http://example.com/childdata?id='+id, function(html) {
parent.after('<tr class="added"><td colspan="3" >'+html+'</td></tr>');
});
I hope this will help you.

Related

Access to cell attributes with row id

I have the following table and jQuery code to create an object based on some columns/cells data-attributes:
<tbody>
<tr id="1">
<td data-name1="Name 1">Name 1</td>
<td data-name2="Name 2">Name 2</td>
<td data-name3="Name 3">Name 3</td>
</tr>
<tr id="2">
<td data-name1="Name 1">Name 1</td>
<td data-name2="Name 2">Name 2</td>
<td data-name3="Name 3">Name 3</td>
</tr>
</tbody>
Right now I have stored all the tr id's in a variable so I have this jQuery code:
for (var x = 0; x < idsVar.length; x++) {
var tdName1 = $(`#${idsVar[x]} > td`).attr('data-name1');
var tdName2 = $(`#${idsVar[x]} > td`).attr('data-name2');
}
This code seems to work. The problem is that now I'm implementing jQuery DataTables library with default pagination and the problem I'm facing is that for example; if my table contains more than 1 page the above code only works for the rows on the current page, if I want to access to the rows from other page they doesn't exists for my jQuery code.
I was reading the DataTables documentation and seems that this code could help:
var table = $('#example').DataTable();
table.rows().nodes().etc...
But I think that code loops throught all the table rows and what I'm trying to do is only on some specific row ids. So my question is how can I access to a specific row id and some data attributes. Maybe something like:
table.rows('specificId').nodes('data-attribute')
or
table.rows('specificId').nodes().something to get the data attribute
To access to a specific row by its ID you can use this:
var row = table.row('#idHere')
And for access to the data attributes of that row you can use this:
var row = table.row('#idHere').nodes()[0];
$(row).attr('data-attributeName');
Please go to datatable docs for more information.

Pass dynamically created html table row innertext id via row click event

I have a htmltable that is dynamically created. I have made the rows clickable.
I need to pass the row innertext id to the script that fires when the row is clicked.
htmltable:
<table style="width:100%;">
<tr>
<th>id</th>
<th>name</th>
<th>other info</th>
</tr>
<tr>
<td class='table_row_click'>11</td>
<td class='table_row_click'>item 2</td>
<td class='table_row_click'>lmfao</td>
</tr>
<tr>
<td class='table_row_click'>22</td>
<td class='table_row_click'>item 2</td>
<td class='table_row_click'>lol</td>
</tr>
</table>
Click event:
$(document).ready(function ($) {
$(".table_row_click").click(function (e) {
//I need to use the clicked row ID here for something
});
});
$(e.target).closest('tr').find('td').first().text();
You can navigate up to the parent tr, find the td elemements, get the first one, and get its text.
Using closest('tr') will work if the class is on the td or tr level, as closest() can match on itself.

How to sort html table after changing it with javascript function

I am using an open source javascript table sorting function on my html table, but it only works if I don't alter the table with another javascript function (which I need to do).
My table:
<table id="myTable" class="random">
<thead>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody id ="mybody">
<tr>
<td>James</td>
<td>Smith</td>
</tr>
<tr>
<td>Kyle</td>
<td>Thompson</td>
</tr>
</tbody>
</table>
I also have a function which replaces the rows in the table
function addRow(item, i, tdcount) {
document.getElementById("mybody").innerHTML = //replace rows
}
The sort only works if I don't click the button to replace rows. As soon as I replace rows, the sort stops working. Is there a way to sort a table after it has been altered?
EDIT:
BTW, the table data is generated by an AJAX call to a different server which queries a database and returns a JSON object which I fill into the table
The solution was to simply add a call to the function after the table is altered:
function addRow(item, i, tdcount) {
document.getElementById("mybody").innerHTML = //replace rows
$(document).ready(function () {
$("#myTable").tablesorter();
}
}

How get the second td innerHTML

Scenario:
I'm using datatable library to display alot of information. That table have the following rows:
Id Type Name Case
What I'm looking for is that when I click the second row Type, that value will be taking and pasted in a textbox
Example
Id Type Name Case
1 text Juan 20001
3 List Pedro 20005
If I click the row that has the id # 1, I need to take the Type innerHTML. Does not matter what apart of the row I click just take the second td's html.
I tried with this code:
$("tr td").click(function () {
alert($(this).html());
})
It worked great, But the problem is that the user have to click exactly the row Name, but would be better if user can click over any of the row and just take the second rows html.
Suggesstions?
myRow.getElementsByClassName('td')[1].innerHTML
should get you the innerHTML of the second table cell of myRow as long as the first table cell does not contain a nested table.
You might try adding the click handler to the rows instead of to the cells too.
Try using eq()
but would be better if user can click over any of the row and just
take the second rows html.
$("tr td").click(function () {
secondrow = $(this).closest('tr').siblings().eq(1);
});
If i click the row that has the id # 1, i need to take the Type
innerHTML. Does not matter what apart of the row i click just take the
second td's html.
$("tr td").click(function () {
secondTd = $(this).siblings().eq(1);
alert(secondTd.html());
});
Try this
$(function () {
$("#thetable tr").click(function () {
if ($(this).index() == 0) return;
$('#tbox').val($('td:nth-child(2)', $(this)).html())
})
});
HTML
<table border="1" cellpadding="4" id="thetable">
<tr>
<td>Id</td>
<td>Type</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table><br />
<input type="text" name="tbox" id="tbox" />
It method takes into account the first row that contains only labels and doesn't set the textbox value to a label if top row is clicked.

Hide a `tr` based on the values of `td` in the table using jQuery

I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.
Here is what my table looks like:
<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>
Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?
EDIT:
Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's
$(document).ready(function() {
$("#table1 td").filter(function() {
return $(this).text == 0;
}).css("text-color", "red");
});
You can do this :
$('tr').each(function(){
var tr = $(this);
if (tr.find('td:eq(0)').text()=="0"
&& tr.find('td:eq(1)').text()=="0"
&& tr.find('td:eq(2)').text()=="0"
) tr.addClass('hidden');
});
Demonstration (the hidden class changes the color to red, it's clearer...)
Depending on your need, you might have to trim the texts, or to parse them.
For more complex tests, you might find useful to work directly with an array of the cell contents. You can get it using
var celltexts = tr.find('td').map(function(){return $(this).text()}).toArray();

Categories

Resources