We Keep Coding

Table <tr> appending again and again

I'm creating <tr> dynamically and append this tr to <tbody> with jquery append method.
The <table> is created inside modal whenever I open modal without refreshing the page the same <tr> appending again and again to the old <tr>.
TABLE inside modal
<table class="table table-bordered tablesorter" id="work_aval">
<thead>
<tr>
<th rowspan="1" colspan="8" class="text-center"></th>
</tr>
<tr>
<th rowspan="1" colspan="8" class="text-center">It is necessary to have some element of weekend availability. If you tick the weekends this could be applied as alternate as well
</th>
</tr>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
AJAX call for <tr> append
$("#work_aval tbody").append(response.availability);

Can you please try html() instead of append() method?
Ex:
$("#work_aval tbody").html(response.availability);

$('#work_aval tbody').empty();
This line works for me.
Thanks

How can I put another content under each row in my table? [duplicate]

This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?

Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.

d3.js : get td value

I am new with d3.js
The problem i am facing is that i am unsure of how to get the value of td.
html
<table class="table">
<thead><tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>
I read the documentation on d3.js but i couldnt find the documentation on how can i retrieve data from the table .
Let's say that i would want to append a div with background color (green) on Credit that has value of negetive , how could we achieve this
This is what i tried
let selection = d3.selectAll("tr")
console.log("Get Table " + selection)
let headerElement = selection.nodes()[0];
let output = selection.selectAll("td")
i tried to printout the value of selected column with console.log(output["0"][1])
but i am receving error.
Thank you in advance

Since D3 v4 selections are objects, not arrays anymore, so you cannot treat them like you did in output["0"][1].
The idiomatic way to loop a selection is using selection.each. For instance:
const tds = d3.selectAll("td")
.each(function() {
console.log(d3.select(this).text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>
If you don't want another selection, d3.select(this).text() is the same of this.innerHTML.
Therefore, you can use the same each to set the "background color (green) on Credit that has value of negetive", as you said:
const tds = d3.selectAll("td")
.each(function() {
d3.select(this).style("background-color", this.innerHTML === "Positive" ? "green" : null)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table class="table">
<thead>
<tr>
<th>S No</th>
<th>Name</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>Arun</td>
<td>Positive</td>
</tr>
<tr>
<td>3</td>
<td>Mickey</td>
<td>Negetive</td>
</tr>
<tr>
<td>4</td>
<td>Zack</td>
<td>Positive</td>
</tr>
</tbody>

Dynamically add headers in table datatable

Is it possible to work with 2 rows in THEAD with dataTables?
<table>
<thead>
## row 1
## row 2
</thead>
<tbody></tbody>
</table>
In row 1 I need 2 single columns and one column with colspan="3":
<tr>
<th></th>
<th></th>
<th colspan="3"></th>
</tr>
And in row 2 I need 5 columns:
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
But I have a case where I don't need 5 columns, but only 3.
Can this be generated dynamically?
UPDATE: I tried: http://datatables.net/release-datatables/examples/basic_init/complex_header.html
But there's no good example how it's generated.

If you look at the source code of the example link you posted, it seems quite clear:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th colspan="3">Details</th>
</tr>
</tfoot>
(Code lifted from link above)
A word on viewing source code: In Firefox you can press ctrl + u to view the page source code. Even if there is heavy jQuery action on the page, the source code in that window will always be the original one without DOM modifications.

How to make a html-table sortable while not sorting specific rows?

I have a html-table, that has a header, that is supposed to be clickable to sort the rows on the clicked column. The tricky part here is, that there are some rows in the table, that shouldn't be sorted and the rows, that belong to that specific row should remain under that row. Here is some code so you get what I'm talking about.
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>
</table>
So if I click for example on the Item-Header, the Apple + Pineapple rows should remain between the Peter and the Stan row while being sorted. If I click on the User-Header, Peter and Stan should be sorted, while the Items Apple + Pineapple remain under the Peter row and the Banana and Orange Items remain under the Stan row ... I hope you get what I mean.
I have already tried it with the jquery tablesorter-plugin but I couldn't find any solution that was working for me.

You'll need to enclose each block of rows in a separate tbody.
Then clicking on User will only sort the tbodys, and clicking on the other ths will sort each tbody separately.
EDIT
The table should look like this:
<table>
<thead>
<tr>
<th>User</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Peter</th>
</tr>
<tr>
<td></td>
<td>Apple</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>Pineapple</td>
<td>15</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="5" style="text-align:left;">Stan</th>
</tr>
<tr>
<td></td>
<td>Banana</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>Orange</td>
<td>10</td>
</tr>
</tbody>