Develop Reference

Change table tr elements using JS

I'm trying to change a few table cells in a function which I've reduced down to this short snippet, to help me understand what is going wrong.
I basically need to use column indexes on an identified <tr> table row and change the value shown in that cell.
I've tried, from looking at various code that accesses table rows,
tr.col[1].innerHTML = "NEW NAME";
tr.cell[1].innerHTML = "NEW NAME";
Also, I'm currently using jQuery as this is part of an ajax call but this might be complicating things. I'm new to JS and jQuery and don't know which parts are which (I know var tr = $('#tbl_id_4') doesn't work without jQuery
function ChangeName(){
alert('Clicked');
var tr = $('#tbl_id_4');
tr[1].innerHTML = "NEW NAME";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" onclick="ChangeName()" value="Click Me" />

You're using the index accessor on the #tbl_id_4 element. As such you're looking for the second element with that id, which obviously does not, and cannot, exist.
To fix this you need to look at the children() of the tr. Also note the use of an unobtrusive event handler in this example. Inline event attributes are no longer good practice and should be avoided where possible.
document.querySelector('.button').addEventListener('click', function() {
var tr = $('#tbl_id_4');
tr.children()[1].innerHTML = "NEW NAME";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />
It's also worth noting that as you're already using jQuery, you could just do this:
$('.button').on('click', function() {
$('#tbl_id_4 td:eq(1)').text("NEW NAME");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JrmTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="tbl_id_1">
<td>1</td>
<td>Peter</td>
</tr>
<tr id="tbl_id_4">
<td>4</td>
<td>Paul</td>
</tr>
</tbody>
</table>
<input type="button" class="button" value="Click Me" />

Hiding table header if table rows until next table header are hidden

I have a list in a table that is alphabetically ordered like so.
<tbody>
<tr>
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr>
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr>
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
I use the $('table tr:has(td.hide-me)').hide() method to hide any of the elements that I don't want shown. However I also want to be able to hide the table headers if the table rows that contain normal table cells are hidden.
In the case above I would like to hide <tr><th><strong>A</strong></th></tr> because it has all of the following table rows hidden but not the the <tr><th><strong>B</strong></th></tr> because not all of the table rows are hidden.
I am relatively new to Jquery and am not sure how best implement conditional statements for a situation like this.

The first thing I did was put a class on the tr to indicate that that row contained a header. This makes it much easier to tell which rows are headers, rather than having to interrogate if they contain a th.
The second thing I did was change your hide expression for the .hide-me to find the hide me first, then find their parent trs, and hide them. This way the selector doesn't have to find the tr and check if each one has a hide me.
Then finally the logic finds all the headers, and shows them, so if any were previously hidden, they would be visible. It then filters the headers and only returns the ones that do not have any following trs that are not hidden. Havin the headers that do not have any visible following trs, it then hides them.
$('.hide-me').closest('tr').hide();
$('.header').show().filter(function(){
return $(this).nextUntil('.header').filter(':not(:hidden)').length < 1;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="header">
<th><strong>A</strong></th>
</tr>
<tr>
<td class="hide-me">Ants</td>
</tr>
<tr>
<td class="hide-me">Animals</td>
</tr>
<tr>
<td class="hide-me">Apples</td>
</tr>
<tr class="header">
<th><strong>B</strong></th>
</tr>
<tr>
<td>Bars</td>
</tr>
<tr>
<td class="hide-me">Bats</td>
</tr>
<tr>
<td class="hide-me">Bananas</td>
</tr>
<tr class="header">
<th><strong>C</strong></th>
</tr>
<tr>
<td>Cans</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Cats</td>
</tr>
</tbody>
</table>

Collapse/Expand Table

I'm looking for a little jquery help to collapse/expand a table that I have on my site. I'd also like the table to start expanded.
Here is an example of a table I have:
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
I'd like it that when you click on the "Header" that it collapses the entire table, not just the row.
I've found the following example, but can't seem to translate it to my case.

Just write a click handler for the caption element
jQuery(function () {
$('table > caption').click(function () {
$(this).next().toggle();
})
})
Demo: Fiddle

because your table is generated dynamically, you should define a parent node in which the table is located. this parent node should always exist in the page and should NOT be generated dynamically.
<div id="table-container">
<table class="table">
<caption>
<div class="video-header">Header</div>
</caption>
<tbody>
<tr class="video-row">
<td class="field-title"> Content </td>
</tr>
<tr class="video-row">
<td class="field-title"> More Content</td>
</tr>
</tbody>
</table>
</div>
then bind click event on that parent node.
$("#table-container caption").on("click", function(){
$("#table-container table").css("display", "none");
});

Copy selected values from table and paste into div onclick - javascript

Ive got a table of data and on each row the there is a button, onclick im trying to 'copy' that rows data, and 'paste' it into another div.
Here's my HTML:
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td>
<button id="addValues">Add</button>
</td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
Ive been trying to do this using:
$(function() {
$('addValues').click(function(){
var content = $('tr').html();
var newdiv = $("#selection");
newdiv.html(content);
$('#content').after(newdiv);
});
});
But cant quite get it to work, any ideas ?
Ive made a fiddle of the problem here - http://jsfiddle.net/9sZaX/2/

There are a few things wrong with your jsFiddle and/or code.
Don't use duplicate id attributes. It will cause unexpected results because jQuery will only select the first one found (which is expected, since there should only be one element with that id). Instead, give the <button>s a class attribute, like "addValues", and use this selector: $(".addValues").
Also, try setting the jsFiddle to actually use jQuery (set up on the left side of the page).
Another important problem was the fact that there is no element with the id of "content" on the page, so the .after() wasn't really doing anything.
Here's how I would set it up, depending on your actual requirements:
HTML -
<table class="list">
<tr>
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>Alpha</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Beta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Charlie</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
<tr>
<td>Delta</td>
<td>10</td>
<td><button class="addValues">Add</button></td>
</tr>
</table>
<div id="selection">
<h4>Selections</h4>
<!-- SELECTED VALUES -->
</div>
JS -
$(function () {
$(".addValues").click(function () {
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
targetArea.append(myRow.children().not(myCol).text() + "<br />");
});
});
DEMO: http://jsfiddle.net/RPd3v/2/

Change colors of table row if column contains certain value

I have a table that looks something like this:
<asp:Repeater ID="myRepeater" runat="server">
<div id="divTable" class="divTable">
<table id="myTable">
<thead>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>D</td>
</tr>
</thead>
<tbody id="myContent">
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
</tr>
<tr>
<td id="findMe">
<%#Eval("IsFlagged")%>
</td>
</tr>
</tbody>
</asp:Repeater>
</table>
</div>
Now, here's what I'm trying to do. If <%#Eval("IsFlagged")%> returns anything at all, i'd like to make all the cells in the table row a certain color.
I've been reading about .contains(), but I haven't found an example that simply asks "if not null, apply a .css style to the rest of the cells of the table row".

I put together an example in jsfiddle: http://jsfiddle.net/aMR5r/
Edit: Your edit makes the code a little simpler, but it's the same principle.
$(function(){
var isFlagged = $('#findMe').text();
if(isFlagged.length > 0)
{
$('#findMe').parent().addClass('yellow');
}
});
http://jsfiddle.net/aMR5r/1/

First, try to give that specific td a class or someting so you can target it. Then you can check the length of $('td.yourclassname').html();

If you are using VB.Net then you can use this code..
<tr style="background-color:<%# IIF(IsDBNull(Eval("IsFlagged"),"none","yellow") %>">
you can apply this logic to TD also.