Targeting even rows of table through jQuery - javascript

I want to give orange color to even rows through jQuery in table.
But that is not working for me.
Below is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the code in custom.css:
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
Below is the code in custom.js:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
I am a beginner in jQuery.
I am looking for a short and simple way.


$(document).ready(function(){
$('.myTable tr:even').addClass('highlight');
});
Remove dot from addClass function


You dont really need jQuery to get this effect. Unless, you have a specific use case / requirement, you could just use the odd, even pseudo classes to accomplish your need.
Here is a sample.
table,
table td {
border: 1px solid white;
background: green;
color: white;
}
table tr:nth-child(even) td {
background-color: orange;
}
.highlight {
background: orange;
}
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>


This is a small example using CSS and jQuery :
// Execute a function when the DOM is fully loaded.
$(document).ready(function () {
// Set the .alt class for the alternate rows
$('.myTable tr:nth-child(even)').addClass('alt');
});
/** Style for the body **/
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Main class for the alternate rows **/
.alt {
background-color:#eee;
}
/** Style for the table **/
.myTable {
border-collapse:collapse;
font-size: 0.917em;
max-width:500px;
min-width:450px;
}
.myTable td {
border:1px solid #333;
padding:4px 8px;
}
.myTable td:nth-child(1) {
width:200px;
}
.myTable td:nth-child(2) {
width:150px;
}
.myTable td:nth-child(3) {
width:100px;
}
/** Style for the cointainer **/
#body {
clear: both;
margin: 0 auto;
max-width: 534px;
}
html, body {
background-color:White;
}
hr {
margin-bottom:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="body">
<h3>Table 1</h3>
<table class="myTable">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td>1600</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h3>Table 2</h3>
<table class="myTable">
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
</div>


You are almost there. The problems in your code are
You want to highlight td and your selector is tr.
Syntax for .addClass() should be addClass('highlight') and not addClass('.highlight').
Replace this:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
with:
$(document).ready(function(){
$('.myTable td:odd tr').addClass('highlight');
});
According to documentation :odd selects even rows:
In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.
RUNNING CODE:
$(document).ready(function(){
$('.myTable tr:odd td').addClass('highlight');
});
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>

Related

Drag and Drop table rows (asp.net mvc)

I need some help with integrating drag and drop functionality into my project. I tried many different ways, but everything is unsuccessful. I stopped on using jquery, however I still have the issue make it running. I will highly appreciate any help.
Here is my view:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#table-1 tr:hover {
background-color:aqua;
color:#fff;
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table" id="table-1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th> Description</th>
</tr>
</thead>
<tbody style="cursor:pointer;">
<tr id="1"><td><div class="dragitem">1</div></td><td><div class="dragitem">One</div></td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("table-1").sortable();
})
</script>

In your code you want to short whole table not tr inside tbody, so why your code is fail. Use tbody selector to short table row.
$("#table-1 tbody").sortable();
Note: You are using id so don't forget to add # .
Example:
$(document).ready(function() {
$("#table-1 tbody").sortable();
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#table-1 tr:hover {
background-color: aqua;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="table-responsive">
<table class="table" id="table-1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th> Description</th>
</tr>
</thead>
<tbody style="cursor:pointer;">
<tr id="1">
<td>
<div class="dragitem">1</div>
</td>
<td>
<div class="dragitem">One</div>
</td>
<td>some text</td>
</tr>
<tr id="2">
<td>2</td>
<td>Two</td>
<td>some text</td>
</tr>
<tr id="3">
<td>3</td>
<td>Three</td>
<td>some text</td>
</tr>
<tr id="4">
<td>4</td>
<td>Four</td>
<td>some text</td>
</tr>
<tr id="5">
<td>5</td>
<td>Five</td>
<td>some text</td>
</tr>
<tr id="6">
<td>6</td>
<td>Six</td>
<td>some text</td>
</tr>
</tbody>
</table>
</div>

CSS Border overlap between two cells in table

how to add border for filename3 and filename4 column as a whole using html and css.
table with borders
<table>
<tbody>
<td id="filename1"> 1</td>
<td id="filename2">1 </td>
<td id="filename3"> 1</td>
<td id="filename4"> 1</td>
</tbody>
</table>

You can give both cells a border, then remove the border on one side with the border-right and border-left properties:
table {
border-collapse: collapse;
}
#filename3 {
border: 10px solid;
border-right: 0px;
}
#filename4 {
border: 10px solid;
border-left: 0px;
}
<table>
<td id="filename1">1</td>
<td id="filename2">2</td>
<td id="filename3">3</td>
<td id="filename4">4</td>
</table>

css:
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Html:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">sum: 180</td>
</tr>
</table>
Have you tried this colspan attribute? If this is what you asked.

I assume you are trying to select both of the ID's at the same time? You can select both of the IDs by
#filename3, #filename4 {/*enter css styles here*/}
If you are trying to select both by a single class, simply add a parent div around the 2 elements you are trying to group.
<tbody><td id="filename1"> </td><td id="filename2"> </td><div class='parent'><td id="filename3"> </td><td id="filename4"> </td></div></tbody>
Hope this helped :)!

How to find a tr which has a specific class attached and get the details of each td - jquery

Please check out this fiddle
https://jsfiddle.net/shaswatatripathy/y7jqb5hp/7/
function getdetails(row) {
$("#tableID tbody tr").each(function() {
$(this).removeClass("highlightRowSelected");
});
$(row).addClass("highlightRowSelected");
}
function DetailsOfTheSelectedRows() {
$.each($("#tableID tbody tr.highlightRowSelected"), function() {
$('#txtBoxValue').value = $(this).find('td:eq(1)').text();
});
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.highlightRowSelected {
background-color: #e2e2e2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableID">
<tr onclick="getdetails(this)">
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr onclick="getdetails(this)">
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</table>
<input type="button" onclick="DetailsOfTheSelectedRows()" value="Selected Row" />
<input type="text" id="txtBoxValue" />
in actual project whole tbody is dynamic , so dont change Html and getdetails(row) function
Table rows can have multiple class added to them dynamically .
My job is to get only that row which has that highlightRowSelected attached to it , get the first columns value and show it in text box
Jquery function DetailsOfTheSelectedRows has to be dynamic too so selector should be there and only one row will have that class name attached .
so how to write DetailsOfTheSelectedRows :

I changed your code as
function DetailsOfTheSelectedRows()
{
$.each($(".highlightRowSelected",'#tableID'), function () {
$('#txtBoxValue').val($(this).find('td:eq(1)').text());
});
}
Updated fiddle
https://jsfiddle.net/y7jqb5hp/9/
Check it

One-liner inside your DetailsOfTheSelectedRows() function...
function DetailsOfTheSelectedRows() {
$('#txtBoxValue').val($('#tableID tr.highlightRowSelected td:eq(1)').text())
}
Here's your fiddle, updated: https://jsfiddle.net/9cuoe5df/

Float <div> element on top of table?

When the <div> is expanded, the table gets expanded too. I intend to expand only the <div>, floating it over the table. How can I do this?
$(document).ready(function() {
$("div").click(function() {
$("div").css({
"height": "100px"
});
});
});
div {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>
<div>click</div>
</td>
</tr>
</table>

All you need is to set position:absolute for your div.
See CSS Layout - The position Property reference.
$(document).ready(function(){
$("div").click(function(){
$("div").css({"height":"100px"});
});
});
div{
background-color:grey;
}
table tr td{
height:20px;
width:20px;
}
div{
position:absolute;
top:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr><td>
<div>click</div>
</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr><td>
click
</td>
<td>
2
</td>
</tr>
</table>

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...

This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);

something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

Categories