Develop Reference

How add multiple rows plain html to existing table after a specific row dynamically

I have a table on a web page, I am trying to add multiple rows after first, second or third row dynamically.
<table class="sort-table">
<tr>
<th>State Owner</th>
<th>Number of Orders</th>
<th>Commission Total</th>
</tr>
<tr>
<td class="so_details" data-name="Adam Howard" data-soid="2"><a class="so_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="2">Total</td>
<td class="currency align-right total">0.00</td>
</tr>
</table>
I have created some new tr elements dynamically. following is the html
<tr>
<td>ID1000</td>
<td class="op_details" data-name="Adam Howard" data-opid="ID1000"><a class="op_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr>
<td>ID06</td>
<td class="op_details" data-name="Cory McEwen" data-opid="ID06"><a class="op_link">Cory McEwen</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="3">Total</td>
<td class="currency align-right total">0.00</td>
</tr>
I want to insert the newly generated HTML tr elements after the first row or second or third etc.
I also want to adjust four td elements in newly created tr under the three td elements of a specific tr. as you can see in the code.
I have tried
let html = `<tr>
<td>ID1000</td>
<td class="op_details" data-name="Adam Howard" data-opid="ID1000"><a class="op_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr>
<td>ID06</td>
<td class="op_details" data-name="Cory McEwen" data-opid="ID06"><a class="op_link">Cory McEwen</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="3">Total</td>
<td class="currency align-right total">0.00</td>
</tr>`
(html).insertAfter($(this).closest('tr'));
//$('.sort-table > tbody > tr').eq(1).after(html);
But nothing happened to dom and it remains unchanged. Please help me in this regard.

JQuery insertAfter() or insertBefore() function can do your job.
insertAfter() // inserts after a selected element
insertBefore() // inserts before a selected element
syntax
$("Your html goes here").insertAfter($('yourtable selector tr:eq(row
index after which you want to insert the html)'));
Here is an example.
<table class="sort-table">
<tr> <td> 1 </td> </tr>
<tr> <td> 2 </td> </tr>
<tr> <td> 3 </td> </tr>
<tr> <td> 4 </td> </tr>
<tr> <td> 5 </td> </tr>
<tr> <td> 6 </td> </tr>
</table>
Now Javascript
var dynamicRow = `<tr>
<td>will insert after first row </td>
</tr>`;
$(dynamicRow).insertAfter($(".sort-table tr:eq(0)")); // 0th index is first-row
// The above 0th index using eq(0) can also be achieved using first-child pseudo selector
$(dynamicRow).insertAfter($(".sort-table tr:first-child"))
// if you want to insert after last row
dynamicRow = `<tr>
<td>will insert after last row </td>
</tr>`;
$(dynamicRow).insertAfter($(".sort-table tr:last-child"));
Note: to give the row index in tr:eq(rowindex), always remember that
it starts from 0 not 1. so
:eq(0) means first-row
:eq(1) means second-row
:eq(9) means (9+1) = 10th row

How to find find value in table cell value with jquery

I have a table html code that comes from out source via ajax like this:
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.

Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()
Demo
var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;
document.querySelectorAll("tr")[1] (second tr)
.querySelectorAll("td")[1] (second td in second tr)
.innerText (gets value)

How about following selector:
$( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();

The only real reference point besides nth-child is your text headings.
Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).
It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice.
$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

Code: http://tpcg.io/Vy9IwJ
<script>
$(document).ready(function() {
$(".stripped td").get().forEach(function(entry, index, array) {
if ($(entry).text()=='Country') {
$('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
}
});
});
</script>
<div id="result">
</div>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

Color table cells onclick

I have a 5x5 table, with each cell containing a word. When I click on the word, I want the color of the cell to be updated to a pre-defined color. In the example below, a table is set up with the colors encoded - what I want is them to be white until their corresponding word is clicked.
<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4">
<TR>
<TD BGCOLOR="#ffff00">Yellow</TD>
<TD BGCOLOR="#00ff00">Green</TD>
</TR>
<TR>
<TD BGCOLOR="#ff00ff">Purple</TD>
<TD BGCOLOR="00ffff">Blue</TD>
</TR>
</TABLE>

Using jQuery you could do this:
$('table td').on('click', function() {
$(this).attr("bgcolor", $(this).attr("data-color"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-color="#ffff00">Yellow
<TD data-color="#00ff00">Green
</TR>
<TR>
<TD data-color="#ff00ff">Purple
<TD data-color="00ffff">Blue
</TD>
</TR>
</TABLE>
For a larger project I'd recommend selecting the table by ID.

If you want to use vanilla Javascript you can add a simple onClick event listener and set the color. The color would need to be stored in a data-bgcolor attribute.
const tableCells = document.querySelectorAll('TD')
tableCells.forEach( function (cell) {
cell.addEventListener('click', function (e) {
e.target.style.backgroundColor = e.target.dataset.bgcolor;
})
})
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-bgcolor="#ffff00">Yellow</TD>
<TD data-bgcolor="#00ff00">Green</TD>
</TR>
<TR>
<TD data-bgcolor="#ff00ff">Purple</TD>
<TD data-bgcolor="#00ffff">Blue</TD>
</TR>
</TABLE>

Copy contents of one field to another using jQuery

I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript

jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/

This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?

Get all elements that does not contain data attribute

I have a table that looks like this:
<table>
<tr>
<td data-col="firstname">Robert</td>
<td data-col="middlename">E</td>
<td data-col="lastname">McIntosh</td>
<td data-col="email">example#gmail.com</td>
<td data-col="title" data-id="123456">Programmer</td>
</tr>
<tr>
<td data-col="firstname">John</td>
<td data-col="middlename">M</td>
<td data-col="lastname">Doe</td>
<td data-col="email">j.m.doe#gmail.com</td>
<td data-col="title" data-id="456789">IT Manager</td>
</tr>
<tr>
<td data-col="firstname">Sue</td>
<td data-col="middlename">L</td>
<td data-col="lastname">Merser</td>
<td data-col="email">s.l.merser#gmail.com</td>
<td data-col="title" data-id="789123">Hates Her Job</td>
</tr>
</table>
I want to add a class labeled title_hide to all td elements that does not contain the a data attribute id equal to 123456?
Javascript I am trying:
$('table tr td:not([data-id="123456"])').closest('tr').addClass('title_hide');

Use :not() selector:
$('td:not([data-id="123456"])').addClass('title_hide');
UPDATE: According to your update it seems that you are trying to add class to <tr> element, which doesn't have <td data-id="123456"> inside. In this case you may use the following approach:
$('tr:not(:has(td[data-id="123456"]))').addClass('title_hide');
DEMO: http://jsfiddle.net/RFwJg/

You can do:
$("table tr td:not([data-id=123456])").addClass("title_hide");

Try not()
$("td:not('[data-col]')").addClass('title_hide');

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('td').not('td[data-id="123456"]').addClass('title_hide');
});
</script>