I have tables like below.
I would like to change colors by clicking and mounsedown and mouseovering on it. I realize such coloring,but I would like to show color transition.
For example,my desired result is when first clicked,td's color will be changed to green and
then,when we clicked greened cells,the color will be changed to Yellow.
How can I realize this color transition?
If you have already experienced,please let me know.
$(function () {
var first;
var second;
$("#table td")
.mousedown(function () {
first = this.id;
console.log("first",first);
return false; // prevent text selection
});
$("#table td")
.mouseup(function () {
second = this.id;
console.log("second",second);
if(first==second){
changecolor(first,"0f0");
}
else if(first<second){
for (var i=first;i<=second; i++)
changecolor(i,"aqua");
}
else{
for (var i=second;i<=first; i++)
changecolor(i,"aqua");}
return false;
});
});
function changecolor(id,color){
$("#"+id).css("background-color",color);}
Not sure if this is what you're looking for, but here are two possible versions you can try.
Long version:
$(function () {
$("td").mousedown(function () {
const green = "rgb(0, 128, 0)"
const yellow = "rgb(255, 255, 0)"
if ($(this).css('background-color') == green )
changecolor(this, yellow)
else
changecolor(this, green)
return false
});
});
function changecolor(el, color) {
$(el).css("background-color", color);
}
Short version:
$(function(){
$("td").mousedown(function(){
$(this).css('background-color',
$(this).css('background-color') == "rgb(0, 128, 0)" ?
"rgb(255, 255, 0)" : "rgb(0, 128, 0)")
return false
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.green{
background-color:green;
}
.yellow{
background-color:yellow;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table id="table">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td class="">john</td>
<td class="">23</td>
</tr>
<tr>
<td class="">tony</td>
<td class="">26</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#tbody td").click(function(){
let className = $(this).attr('class')
if(className == ''){
$(this).addClass('green')
}
else if(className == "green"){
$(this).removeClass('green')
$(this).addClass('yellow')
}
else{
console.log("do something")
}
})
})
</script>
</body>
</html>
try it
Related
How to enable or disable a click on a table row in jquery? What I want to accomplish are, when a user click the edit button, user cannot select/click a table row. When a user click either the save button or cancel button a user can select/click a table row. I already implemented my solution but it is not working. I already put comments where the problem occurs. Here is the link to my code https://jsfiddle.net/Xonnn/ngka3Lh9/2/.
I've added a variable editRowEnable
This the code will set as true/false depending on if edit row is "active"
Pending on the value of editRowEnable then you will be able to select row or not.
Demo
$(document).ready(function() {
var editRowEnable = false;
function populateInputFields() {
var currentRow = $("#myTable tr.highlighted");
var input1 = $("#input1").val(currentRow.find("td:eq(0)").text());
var input2 = $("#input2").val(currentRow.find("td:eq(1)").text());
var input3 = $("#input3").val(currentRow.find("td:eq(2)").text());
}
function isRowHighlighted() {
if (!$('input').val()) {
alert("Please click a row.");
} else {
editEnableDisable();
input1;
input2;
input3;
}
}
function editEnableDisable() {
$("#input1").prop('disabled', false);
$("#input2").prop('disabled', false);
$("#input3").prop('disabled', false);
$("#edit").prop('disabled', true);
$("#save").prop('disabled', false);
$("#cancel").prop('disabled', false);
}
function saveCancelEnableDisable() {
$("#input1").prop('disabled', true);
$("#input2").prop('disabled', true);
$("#input3").prop('disabled', true);
$("#edit").prop('disabled', false);
$("#save").prop('disabled', true);
$("#cancel").prop('disabled', true);
}
function successDialogBox() {
$("p").text("Case has been updated");
$("#dialogBox").dialog();
}
function updateGridData() {
enableTableSelection();
var currentRow = $("#myTable tr.highlighted");
currentRow.find("td:eq(0)").text($("#input1").val());
currentRow.find("td:eq(1)").text($("#input2").val());
currentRow.find("td:eq(2)").text($("#input3").val());
}
function revertChanges() {
var currentRow = $("#myTable tr.highlighted");
var previous1 = currentRow.find("td:eq(0)").text()
var previous2 = currentRow.find("td:eq(1)").text()
var previous3 = currentRow.find("td:eq(2)").text()
$("#input1").val(previous1);
$("#input2").val(previous2);
$("#input3").val(previous3);
}
///ENABLE OR DISABLE CLICK ON TABLE ROWS
function disableTableSelection() {
$("#recentCasesTable tr").off('click');
}
function enableTableSelection() {
$("#recentCasesTable tr").on('click');
}
$('#myTable tr').click(function() {
if (!editRowEnable) {
$('#myTable tr').removeClass('highlighted');
$(this).addClass('highlighted');
populateInputFields();
}
});
$("#edit").click(function() {
editRowEnable = true;
disableTableSelection(); //This Function is not working
isRowHighlighted();
});
$("#save").click(function() {
editRowEnable = false;
enableTableSelection(); //This Function is not working
updateGridData()
saveCancelEnableDisable()
successDialogBox();
});
$("#cancel").click(function() {
editRowEnable = false;
enableTableSelection(); //This Function is not working
revertChanges();
saveCancelEnableDisable();
});
});
#myTable {
border-collapse: collapse;
width: 50%;
border: 1px solid #ddd;
padding: 2px;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
}
#myTable td,
th {
border: 1px solid #ddd;
padding: 8px;
}
#myTable tr:nth-child(even) {
background-color: #D8D8D8;
}
#myTable tr.highlighted td {
background-color: #5c715e;
}
#caseDetailsContainer {
border-style: solid;
}
fieldset {
border: 1px solid #04AA6D;
border-width: thin;
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TABLE ENABLE DISABLE SELECTION</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/script.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="https:/resources/demos/style.css" />
<link type="text/css" href="Style/style.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="https:/resources/demos/style.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<th>TH 1 </th>
<th>TH 2 </th>
<th>TH 3 </th>
</tr>
<tr>
<td>R1 </td>
<td>R1 </td>
<td>R1 </td>
</tr>
<tr>
<td>R2 </td>
<td>R2 </td>
<td>R2 </td>
</tr>
<tr>
<td>R3 </td>
<td>R3 </td>
<td>R3 </td>
</tr>
</table>
<fieldset>
<legend><b>Input Fields</b></legend>
<table id="caseDetails">
<tr>
<td>Department Case #</td>
<td><input type="text" id="input1" name="input1#" disabled="disabled" / value="" /></td>
</tr>
<tr>
<td>Department</td>
<td><input type="text" id="input2" name="input2" disabled="disabled" value="" /></td>
</tr>
<tr>
<td>Charge</td>
<td><input type="text" id="input3" name="input3" disabled="disabled" value="" /></td>
</tr>
</table>
<br/>
<button id="edit" name="edit" type="submit" value="edit">Edit</button>
<button id="save" name="save" type="submit" value="save" disabled="disabled">Save</button>
<button id="cancel" name="cancel" type="submit" value="cancel" disabled="disabled">Cancel</button>
</fieldset>
<div id="dialogBox">
<p>
</p>
</div>
</body>
</html>
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
I am a beginner with using dojo toolkit and I am trying to create an alarm where the screen blinks red continuously when a button is pressed and only stop when the button is pressed again. I have been able to change the background color once but I dont know how to make it continuously trigger between being red or no background color.
here is my html file with the table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="alarm.css" />
<!-- load Dojo -->
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script> require(['myModule.js']); </script>
<title>Alarm test</title>
</head>
<body class="claro">
<h1 id="greeting">Alarm test</h1>
<table data-dojo-type="dojox.grid.DataGrid" id="tableContainer">
<thead>
<tr>
<th field="col1">Company</th>
<th field="col2">Contact</th>
<th field="col3">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</thead>
</table>
<button id="progButtonNode" type="button"></button>
</body>
</html>
here is my button on() event handler for changing the background once:
require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(style, dom, on){
on(dom.byId("progButtonNode"), "click", function(){
style.set("tableContainer", {
backgroundColor: "red"
});
});
});
And here is my table's css. I have another question regarding this; how can I override a css using code? Because when I change the background color it only applies on the rows which does not already have a background color set like this: http://imgur.com/rsCN8Vx
table, th, td {
border: 1px solid black;
}
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;
}
This code here:
function(style, dom, on){
on(dom.byId("progButtonNode"), "click", function(){
style.set("tableContainer", {
backgroundColor: "red"
});
});
});
Could try this instead:
function(style, dom, on){
on(dom.byId("progButtonNode"), "click", function(){
class.set("tableContainer", {
"blink" // or however you add a class in dojo, not sure
});
});
});
And your css would look like this
.blink {
animation:blink 700ms infinite alternate;
}
#keyframes blink {
from { background-color: white; }
to { background-color: red; }
};
In dojo, there should be an easy to toggle a class similar to jQuery. If not, just add a conditional to check if the class is there. If it is, remove the class blink and the effect will go away.
A more simple way of doing this would be
/*js*/
require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/dom-class", "dojo/domReady!"],
function(style, dom, on, domClass) {
var blink;
on(dom.byId("progButtonNode"), "click", function() {
if(blink) {
clearInterval(blink);
blink = null;
} else {
blink = setInterval(function() {
domClass.toggle("tableContainer", "background");
}, 1000); // 1 second
}
});
});
And add this class to your css file
/*css*/
.background {
background-color: red;
}
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
.search_input {
background-image: url(search_icon.png);
background-position: 3px 9px;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 15%;
height: 31px;
padding: 12px 8px 9px 26px;
border: 1px solid #ddd;
margin: 12px 0 12px 0;
border-radius: 7px;
}
.my_tabel {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 13px;
}
.my_tabel th, .my_tabel td {
text-align: left;
padding: 12px;
}
.my_tabeltr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
table, .line{
border: 1px solid;
}
thead
{
background-color: #93B6D2;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark Scheid</td>
<td>mscgei#wgu.edu</td>
<td>06-jan-15</td>
<td>PK0-003-Project+</td>
<td>03ocb</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Kenneth Nagle</td>
<td>knagle#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>02Oki</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kenneth</td>
<td>matt.bearce#verizonwireless.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td>
<td>030c8</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Rafael Moreno</td>
<td>rmoren4#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>030c7</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Paul Doyle</td>
<td>doylepaul#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030c6</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Paul Doyle</td>
<td>esmally#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030bb</td>
<td>Course</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
I created a table with some data using html and bootstrap and i create a function of filter/searching in input type using pure java script now i need do sorting of data from ascending to descending or vise-versa.
You can just do (arrayName).sort(); it automatically sorts the numbers and letters from small to big for you (From A-Z and 1-(biggest number)), and you can also use:
(arrayName).sort(function(a, b){
return b - a;
});
to sort from the biggest to the smallest
Here is a documentation on the .sort function: https://www.w3schools.com/jsref/jsref_sort.asp
Hopefully it helps!
What you need to do is store the data in a JavaScript array. Then you can iterate over your records and sort them dynamically in JS. Once you're doing that, it's just a matter of clearing and re-rendering your table:
var users = [
{
row: 1,
name: 'B Mark Scheid',
email: 'mscgei#wgu.edu',
date: '06-jan-15',
courses: 'PK0-003-Project+',
guid: '03ocb',
license: 'Course'
},
{
row: 2,
name: 'C Kenneth Nagle',
email: 'knagle#wgu.edu',
date: '06-jan-15',
courses: 'N10-005 CompTIA Network+',
guid: '02Oki',
license: 'Course'
},
{
row: 3,
name: 'A enneth',
email: 'matt.bearce#verizonwireless.com',
date: '06-jan-15',
courses: 'Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)',
guid: '030c8',
license: 'Course'
}
]
function renderTable(){
users.forEach(function(user, key){
// You'll want to fill this out with all your `td`,
// just doing the first column for demonstration purposes.
var tr = "<tr><th scope=\"row\">"+user.row+"</th><td>"+user.name+"</td></tr>";
$('#myTable tbody').append(tr);
})
}
function clearTable(){
// Clear the table body of all `tr`.
$('#myTable tbody').empty();
}
function sortBy(param){
// Bullt-in array sort.
users = users.sort(function(a,b){
// Handle sorting numbers.
if(typeof a[param] == 'number') return a[param] - b[param];
// Handle sorting strings.
// `localeCompare() tells us whether or not `a` is before `b` in the alphabet.
return a[param].localeCompare(b[param]);
});
}
// We're gonna register click listeners on each of the headers,
// using the `class` names I add in the HTML below.
// This just says: for each of the keys that the first user has,
// mount a click handler.
Object.keys(users[0]).forEach(function(key){
$('.header-' + key).click(function(){
// Pretty self-explanatory.
sortBy(key);
clearTable();
renderTable();
});
});
// Start off with the table showing.
renderTable();
// Your search still works.
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th class="header-row">#</th>
<!-- I am adding classes to the headers for click listeners. -->
<th class="header-name">Name</th>
<th class="header-email">Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<!-- NOTICE THE EMPTY TABLE HERE! WE WILL GENERATE THIS IN THE JS! -->
</tbody>
</table>
</div>
</form>
</body>
</html>
I'll leave descending order as a task for you.
Okay I have an HTML page.
Inside this page I have a table with rows and columns.
For each TD element.
I have an "idnum" attribute.
Now I also have one ARRAY.
In this ARRAY I have 3 objects. More accurate 3 numbers.
With a good look, look at the numbers that match the numbers in the table.
Now I want each object in the table whose number is in ARRAY.
Will get a straight red background color.
More accurate that the object of another class.
Who has an idea how can I solve this?
Thank you all.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script>
<script type="text/javascript">
</script>
<title></title>
<style type="text/css">
td:hover{
color: red;
}
.class1{
}
.class2{
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>test</th>
<td class="class1" idnum="111">TD1</td>
<td class="class1" idnum="222">TD2</td>
<td class="class1" idnum="333">TD3</td>
</tr>
</table>
<h1 id="content"></h1>
<script type="text/javascript">
$(document).ready(function(){
var array1 = ["111","222","333"];
for(var i = 0; i<array1.length; i++){
$("#content").append(i+"-->"+array1[i] + "</br>" );
var count = array1[i];
var td = $("*").find("td").attr("idnum");
if(td == array1[i]){
$(this).toggleClass("class2");
}
}
});
$(document).ready(function(){
$(".class1").on("click", function(){
$(this).toggleClass("class2");
var idnum = $(this).attr("idnum");
alert("idnum is " + idnum);
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script>
<script type="text/javascript">
</script>
<title></title>
<style type="text/css">
td:hover{
color: red;
}
.class1{
}
.class2{
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>test</th>
<td class="class1" idnum="111">TD1</td>
<td class="class1" idnum="444">TD2</td>
<td class="class1" idnum="333">TD3</td>
</tr>
</table>
<h1 id="content"></h1>
<script type="text/javascript">
$(document).ready(function(){
var array1 = ["111","444","333"];
$("td").each(function(){
var td = ($(this).attr("idnum"));
for(var i = 0; i < array1.length; i++){
if(td == array1[i])
$(this).addClass("class2");
}
})
})
$(document).ready(function(){
$(".class1").on("click", function(){
$(this).toggleClass("class2");
var idnum = $(this).attr("idnum");
alert("idnum is " + idnum);
})
})
</script>
</body>
</html>