We Keep Coding

Changing Day Date of <td> using JQuery

I am trying to change all the table Due Date values from the 31st to the 25th using jquery. The current code I am using is not working, as it is putting all values instead of the single value.
var dueDate1 = $("td:contains(/31/)").text();
var dueDate = dueDate1.replace(/31/g, "25");
$("td:contains(/31/)").text(dueDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Due Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Due Date">08/31/21</td>
<td data-title="Amount">$500</td>
</tr>
<tr>
<td data-title="Due Date">07/31/21</td>
<td data-title="Amount">$1500</td>
</tr>
<tr>
<td data-title="Due Date">06/31/21</td>
<td data-title="Amount">$2500</td>
</tr>
</tbody>
</table>

Your attempt is working on the entire set of data all at once.
$("td:contains(/31/)").text(); will return all the text of all the cells.
Instead, loop through the cells and update them individually.
$("td:contains('31')").each(function(idx, element){
$(element).text($(element).text().replace("31", "25"));
});
td { padding:2px; border:1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Due Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Due Date">08/31/21</td>
<td data-title="Amount">$500</td>
</tr>
<tr>
<td data-title="Due Date">07/31/21</td>
<td data-title="Amount">$1500</td>
</tr>
<tr>
<td data-title="Due Date">06/31/21</td>
<td data-title="Amount">$2500</td>
</tr>
</tbody>
</table>

Merging two html table in jquery

I want to merge two html table in jquery.I want to merge the table tbl1 and tbl2 and recreate a table joined.I just want to copy the tag not to cut the tag.need to have 3 tables
I have tried as
$('button').click(function(){
$('#tbl2 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl1 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl2 tbody tr').wrap('#joined tbody tr');
$('#tbl1 tbody tr').wrap('#joined tbody tr');
});
#joined{background:#ff0;margin-bottom:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>
<table id="joined"><thead><tr></tr><thead>
<tbody><tr></tr><tbody>
</table>
<table id="tbl1">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
<table id="tbl2">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
I need the html table as
<table id="joined">
<thead >
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
<th></th> <!-- empty cell -->
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
<td></td> <!-- empty cell -->
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>

how to toggle table rows from 3rd

I have multiple tables on a page.
Each table has more than 10 rows.
The design is to show first rows on each table with a 'show more' button.
Once a user clicks the show more button.
It will expand the hidden rows on the clicked table only.
Any idea to make it easily?
It seems hard to implement by css, because there are multiple tables on a page.
My idea is to put the toogle button on each table.
Which will intercept the click trigger. And find the closest parent table.
Finally, change all the rows style in the table. from display:none to show.

As you've not given us much to go on, we will assume that your toggle buttons immediately follow your tables.
I've given you three options. No Jquery, Jquery and CSS with a bit of a hack.
No Jquery
var toggleButtons = document.getElementsByClassName("toggleTable");
for (var i = 0; i < toggleButtons.length; i++) {
toggleButtons[i].addEventListener('click', function() {
this.previousElementSibling.classList.toggle('collapsed');
}, false);
}
/*Change nth-child as required*/
table.collapsed>tbody>tr:nth-child(n+2) {
display: none;
}
<table class="collapsed">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>
<input type="button" value="Toggle Rows" class="toggleTable">
Support Issues, this will have issues in IE 9 and lower, other major browsers should be fine.:
http://caniuse.com/#feat=getelementsbyclassname
http://caniuse.com/#feat=addeventlistener
https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
http://caniuse.com/#search=classList
Jquery -- Solves the support issues above.
$(".toggleTable").click(function(){
$(this).prev("table").toggleClass("collapsed");
});
/*Change nth-child as required*/
table.collapsed>tbody>tr:nth-child(n+2)
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="collapsed">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>
<input type="button" value="Toggle Rows" class="toggleTable">
CSS Only - With a bit of a hack. You will need to generate in ID for each check box and associated label. In this instance the button must come before the table.
/*Use CSS to hide the rows of the table that is next to check box that is next to an element with a class of tableToggle*/
.tableToggle + input[type="checkbox"]:checked + table>tbody>tr:nth-child(n+2) {
display: none;
}
/*Hide the checkbox*/
.tableToggle + input[type="checkbox"] {display:none;}
/*Button Styling only -- noting important here*/
.tableToggle{
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
padding:5px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
<label class="tableToggle" for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>

Unless you decide to use a library like jQuery, this is going to require a decent amount of code. Abstracting out certain functionality like showing and hiding elements helps to reduce the bloat:
function hide (e) { e.style.display = 'none' }
function show (e) { e.style.display = '' }
function additionalRows (table) {
return [].slice.call(table.rows, +table.getAttribute('data-initial-rows'))
}
function insertAfter (e, reference) {
reference.parentNode[reference.nextSibling ? 'insertBefore' : 'appendChild'](e, reference.nextSibling)
}
function showAll () {
additionalRows(this.previousSibling).forEach(show)
this.parentNode.removeChild(this)
}
var template = document.createElement('button')
template.textContent = 'Show All'
document.querySelectorAll('.expandable-table').forEach(function (table) {
additionalRows(table).forEach(hide)
var button = template.cloneNode(true)
button.addEventListener('click', showAll)
insertAfter(button, table)
})
<table class="expandable-table" data-initial-rows="10">
<thead>
<tr><th>X</th><th>Y</th></tr>
</thead>
<tr><td>7.34</td><td>9.56</td></tr>
<tr><td>5.64</td><td>4.14</td></tr>
<tr><td>0.99</td><td>8.55</td></tr>
<tr><td>9.18</td><td>8.65</td></tr>
<tr><td>6.60</td><td>3.25</td></tr>
<tr><td>8.88</td><td>5.29</td></tr>
<tr><td>0.40</td><td>5.36</td></tr>
<tr><td>9.74</td><td>7.14</td></tr>
<tr><td>7.61</td><td>6.32</td></tr>
<tr><td>3.87</td><td>2.80</td></tr>
<tr><td>0.77</td><td>0.11</td></tr>
<tr><td>8.78</td><td>5.45</td></tr>
<tr><td>2.40</td><td>7.54</td></tr>
<tr><td>6.53</td><td>1.45</td></tr>
<tr><td>7.92</td><td>1.90</td></tr>
<tr><td>1.81</td><td>4.69</td></tr>
<tr><td>9.40</td><td>7.86</td></tr>
<tr><td>3.33</td><td>5.08</td></tr>
<tr><td>0.18</td><td>3.16</td></tr>
<tr><td>1.54</td><td>0.80</td></tr>
</table>

Try This way :
$('.btnShow').click(function () {
$(this).prev("table").find("tr.expand").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Mobile No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Taylor</td>
<td>123456789</td>
</tr>
<tr class="expand" style="display:none">
<td>2</td>
<td>Smith</td>
<td>456789</td>
</tr>
<tr class="expand" style="display:none">
<td>3</td>
<td>Mr. Patel</td>
<td>456789</td>
</tr>
<tr class="expand" style="display:none">
<td>4</td>
<td>Nirav</td>
<td>987654321</td>
</tr>
</tbody>
</table>
<input type="button" value="Show / Hide" class="btnShow" />

Change background of entire table row

I'm looking to make the entire row of a table change colour (either the background colour or text colour) based on the value of the column labelled "Status". If the value in the "Status" column is "Expired" the background of the entire row should change.
(Edit: The data is going to be pulled dynamically from a database).
Any suggestions?
HTML Code
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
Thanks in advance.

If you can change how the table is rendered than I would just add the text as a class. This will be the best performance option and requires no JavaScript and the content will not flash.
tr.Expired td {
background-color: red;
}
tr.Active td {
background-color: green;
}
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="Active">
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr class="Expired">
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
Or you will need to run JavaScript code that reads the cell value and adds the class.
$("tr:has(td:last:contains('Expired'))").addClass("Expired");
tr.Expired td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>

try using CSS only adding a class to the tr.
tr.active > td {
background-color: green;
}
tr.expired > td {
background-color: red;
}
https://jsfiddle.net/jt717mL8/

In your case the status column is the 5th. So you may do something like:
$('table tr:gt(0)').each(function(idx, ele) {
if ($(ele).find('td:eq(4)').text() == 'Expired') {
$(ele).css('backgroundColor', 'yellow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

You can first get index of status th and then check each td with same index and check its text.
var i = $('th:contains(Status)').index();
$('tr').each(function() {
var td = $(this).find('td').eq(i);
if (td.text() == 'Expired') td.css('background', 'red')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>

mouseevent for jquery for selection on click

I want to set the color when my mouse click on the specific row on table and it should not change the color when mouse leave from that row. Please gothrough my coding and you will understand.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").mouseenter(function(){
$(this).css("background-color", "lightgray");
});
$("tr").mouseleave(function(){
$(this).css("background-color", "white");
});
$("tr").on("click", function(){
$(this).css("background-color", "yellow");
});
});
</script>
</head>
<body>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
<tr id="trid5">
<td>5</td>
<td>kumar</td>
<td>vnr</td>
</tr>
<tr id="trid6">
<td>6</td>
<td>kali</td>
<td>mdu</td>
</tr>
<tr id="trid7">
<td>7</td>
<td>madu</td>
<td>ttl</td>
</tr>
<tr id="trid8">
<td>8</td>
<td>kalai</td>
<td>mdu</td>
</tr>
</table>
</body>
</html>
According to the above code, if we enter the mouse into a table row, it changes to the lightgray color. After that, when we leave that row, it changes to white color. Then, when we click on a specific row, it changes to yellow color, when we leave from that it also changed to white color.
My need is, if I click on the row of a table, it should set yellow color and it should not change to white when leaving.
Please help me in this issue. Thanks in advance.

In general, it is not a correct aprroach. You shouldn't change inline styling of every item - that's why people have invented CSS.
Describe the CSS rules for tr and for a custom class like selected. Then, just add selected class to tr on click.
$(document).ready(function(){
$("tr").on("click", function(){
$(this).addClass("selected");
});
});
tr:hover {
background-color: lightgray;
}
tr {
background-color: white;
}
tr.selected, tr.selected:hover, tr.selected:focus {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
</tr>
</table>
Now, you can easily manipulate with colors, hover effects etc.
For example, if you want to disable this "yellow-selecting" on clicking again and add an effect to selected tr on hover - you can change it in a moment by editing a single line of code. Check this example out (click on a row twice):
$(document).ready(function(){
$("tr").on("click", function(){
$(this).toggleClass("selected");
});
});
tr:hover {
background-color: lightgray;
}
tr {
background-color: white;
}
tr.selected, tr.selected:hover, tr.selected:focus {
background-color: yellow;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
</tr>
</table>

You can use a mix of css and jQuery as given below.
To set the mouseover style, use :hover rule, but exclude the clicked elements are given below
$(document).ready(function() {
$("tr").on("click", function() {
$(this).addClass('clicked');
});
});
tr:not(.clicked):hover {
background-color: lightgrey;
}
tr.clicked{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="3" cellpadding="3">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr id="trid1">
<td>1</td>
<td>Ram</td>
<td>ttl</td>
</tr>
<tr id="trid2">
<td>2</td>
<td>karthi</td>
<td>svks</td>
</tr>
<tr id="trid3">
<td>3</td>
<td>raj</td>
<td>vnr</td>
</tr>
<tr id="trid4">
<td>4</td>
<td>raja</td>
<td>ttl</td>
</tr>
<tr id="trid5">
<td>5</td>
<td>kumar</td>
<td>vnr</td>
</tr>
<tr id="trid6">
<td>6</td>
<td>kali</td>
<td>mdu</td>
</tr>
<tr id="trid7">
<td>7</td>
<td>madu</td>
<td>ttl</td>
</tr>
<tr id="trid8">
<td>8</td>
<td>kalai</td>
<td>mdu</td>
</tr>
</table>

Add This CSS No Use Jquery
table tr:hover{backgound:red;}
table tr:focus{backgound:yellow;}