How can I add new <tr> after a clicked <tr>. On click of this <tr> and remove now created when click other <tr> (with repeat 1st scenario) by jQuery?
I tried like this, but it does not work:
$("#test_table tr").click(function() {
$(this).prev().remove();
$(this).closest('tr').append('<tr><td>2.2</td></tr>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Given your goal it seems that you want to replace the current tr with the new HTML snippet. To do that you just need to call after() to insert the new HTML, then remove() to clear the original tr:
$("#test_table tr").click(function() {
$(this).after('<tr><td>2.2</td></tr>').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
However, as the only effect of this is to change the text within the td, you can just call text() instead:
$("#test_table tr").click(function() {
$(this).find('td').text('2.2');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Related
I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});
I have a table in my page and don't want to show entire table at once. Instead, I'd like to show only 3 rows by default. Then, when a user clicks on the more button, I want to display all rows.
I tried the below code to accomplish that, but had a rendering issue. Is there any possibility to add collapse to table rows in html?
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<span class="more clickable" data-toggle="collapse" data-target="#remaining-data">more
</span>
</td>
</tr>
<table class="collapse table table-stripped" id="remaining-data">
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
</table>
<table>
I have used nth-child(4) that means it will get 3rd tr and add display: none CSS to every tr after that due to nextAll() now when I click on more button it will toggle the element with fade effect, there is no need to write new table or tbody
$(function(){
$("table tr:nth-child(4)").nextAll().css("display","none");
$(".clickable").on("click", function(){
$("table tr:nth-child(4)").nextAll().fadeToggle();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<span class="more clickable btn btn-sm pull-right btn-link">more
</span>
</td>
</tr>
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
<table>
Don't use a second table, but instead a <tbody> element to wrap multiple rows together. These <tbody> elements can be used multiple times within the same table (see link). Using a second table leads to a different width of the columns. Furthermore, you added a second table inside only one cell of the parent table.
Here is an example:
document.querySelector('.more').addEventListener('click', function() {
document.querySelector('.initially-hidden-rows').classList.remove('hidden');
});
table td,
table th {
border: 1px solid black;
}
.more {
color: blue;
cursor: pointer;
text-decoration: underline;
}
.hidden {
display: none;
}
<table>
<tbody class="initial-rows">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>abcde</td>
</tr>
<tr>
<td>2</td>
<td>bcdef</td>
</tr>
<tr>
<td>3</td>
<td>cdefg
<a class="more">more</a>
</td>
</tr>
</tbody>
<tbody class="initially-hidden-rows hidden">
<tr>
<td>4</td>
<td>defgh</td>
</tr>
<tr>
<td>5</td>
<td>efghi</td>
</tr>
</tbody>
<table>
I would like to add a new element with jQuery with DOM-manipulation but I'm a little bit confused with all the functions like eq, nth and so on.
Here is my base construct:
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
Here should be the DOM-Manipulation
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
Where the "Here should be the DOM-Manipulation" I would like to insert a new tablerow.
Use this:
$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');
.tableInput{border:1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
You need to use .after
$(document).ready(function(){
$tr = '<tr><td>Hello</td></tr>';
$('#myTable tr:first').after($tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput" id="myTable">
<tr>
<td></td>
</tr>
</table>
You can add table row with following ways :
1. Via append :
a. Without declaring element before :
$("#tableInput").last().append('<tr><td></td></tr>');
b. With declaring element :
var tableRow = $('<tr><td></td></tr>');
$("#tableInput").last().append(tableRow);
Via after :
var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);
Just append a new table row to the last <table> element like this
$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')
table{
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td>A</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>B</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>C</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>D</td>
</tr>
<!--Here should be the DOM-Manipulation !-->
</table>
<table class="tableInput">
<tr>
<td>E</td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/
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;}
I have two tables with different heights next to each other. I would like the tables to slideToggle independently.
When selecting the table headers, currently nothing is happening...
The fiddle: http://jsfiddle.net/wod51fvL/
Any comments welcomed!
The HTML:
<h1>Test Heading 1</h1>
<table>
<tr>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="clientClick" colspan="3" style="cursor:pointer;">Client</th>
</tr>
</thead>
<div id="clientResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="employeeClick" colspan="3" style="cursor:pointer;">Employee</th>
</tr>
</thead>
<div id="employeeResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
</tr>
</table>
The JS:
var j$ = jQuery.noConflict();
j$(document).ready(function () {
j$("#clientClick").click(function () {
j$("#clientResult").slideToggle(600);
});
});
j$(document).ready(function () {
j$("#employeeClick").click(function () {
j$("#employeeResult").slideToggle(600);
});
});
A very bad html and js
You can't wrap tr tags into div.
You don't need to call document.ready function twice
Here is a quick jsfiddle to fit your example. It needs to be improved(no time sorry).
http://jsfiddle.net/wod51fvL/7/
$(document).ready(function () {
$("#clientClick").click(function () {
$("#clientResult").slideToggle(600);
});
$("#employeeClick").click(function () {
$("#employeeResult").slideToggle(600);
});
});