I'm making a function that would change the color of a row in a table when you click on it, there are many rows in this table.
I'm developing on Chrome (latest version) and it says that the function "selectme" is not defined.
My IDE is not signaling any errors (Dreamweaver CC)
<table>
<tr onClick="selectme('1')">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr onClick="selectme('2')">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr onClick="selectme('3')">
<td class="name">Grace - David Parsons</td>
</tr>
<tr onClick="selectme('4')">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
The javascript
function selectme(number)
{
var selector = "#" + number
$(selector).css("background-color", "rgb(3,135,255)");
selected = number;
}
You could try passing the element itself as argument, try
<table>
<tr onClick="selectme(this)">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Grace - David Parsons</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
Javascript
function selectme(elem){
$(elem).css("background-color", "rgb(3,135,255)");
}
jsfiddle here
OR You could bind the table tr click event, Say the tables id is myTab
$('#myTab tr').on('click',function(e){
$(this).css("background-color", "rgb(3,135,255)");
});
jsfiddle here
<table>
<tr id="1" onClick="selectme(this.id)">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr id="2" onClick="selectme(this.id)">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr id="3" onClick="selectme(this.id)">
<td class="name">Grace - David Parsons</td>
</tr>
<tr id="4" onClick="selectme(this.id)">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
function selectme(number)
{
$("#"+number).css("background-color", "rgb(3,135,255)");
selected = number;
}
try this
I would suggest you:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<table id="table12">
<tr>
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr>
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr>
<td class="name">Grace - David Parsons</td>
</tr>
<tr>
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
<script>
$(function(){
$('#table12 tr').click(function(){
console.log(this);
$(this).css("background-color", "rgb(3,135,255)");
});
});
</script>
</body>
</html>
Inline event handlers are ugly and hard to maintain.
Why not try it unobtrusively?
$("table tr").on("click", function(){
$(this).toggleClass("blue");
});
Fiddle
If you need to change the rows different colors, you could use data attributes, e.g.
<tr data-color="red">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
$("table tr").on("click", function(){
var color = $(this).data("color");
$(this).toggleClass(color);
});
No semi-colon here:
var selector = "#" + number; <-- HERE
Replace this
function selectme(number)
{
var selector = "#" + number
$(selector).css("background-color", "rgb(3,135,255)");
selected = number;
}
WITH
function selectme(number)
{
var selector = "#" + number; //HERE YOU FORGOT SEMI-COLON
$(selector).css("background-color", "rgb(3,135,255)");
selected = number;
}
Also your HTML onclick will call the javascript function but in the function you have
$(selector) which should point to id="1" but no control on your page exists with the id 1.
So also add the id="1" on your td's
<td id="1" onclick="selectme('1');"></td>
and because you have the id on the TD now, you can reference it directly in the onclick part
<td id="1" onclick="selectme(this.id);"></td>
Related
I would like to have a table which has words included in td. I am wondering if there is any way that search result shown irrespective of the way user searched. for example td contains " love and dance and sing " but the code that I have show result only when user types "love and dance and sing " . If user type "dance and love" it doesn't show.I want to show result irrespective of arrangement of words,
ie , if user types "sing and dance" or dance and love" result should show up.
Any help would be really appreciated. Thanks in Advance
Here is my code
$(document).ready(function() {
(function($) {
$('#filter').keyup(function() {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function() {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="filter" type="search" placeholder="Search"></form>
<table>
<tbody class="searchable">
<tr>
<td>love and dance </td>
<td> something else</td>
</tr>
<tr>
<td>play and eat </td>
<td></td>
</tr>
<tr>
<td>love and roll </td>
<td></td>
</tr>
</tbody>
</table>
Loop over the search terms and check them each individually. No need for regex.
I would also question whether you really need jQuery; this code would have been just as easy to write without it and it's then more flexible.
$(document).ready(function() {
(function($) {
$('#filter').keyup(function() {
var terms = this.value.split(' ');
$('.searchable tr').hide();
$('.searchable tr').filter(function() {
for (var term of terms) {
if (this.textContent.indexOf(term) < 0) return false;
}
return true;
}).show();
})
}(jQuery));
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="filter" type="search" placeholder="Search">
<table>
<tbody class="searchable">
<tr>
<td>love and dance </td>
<td> something else</td>
</tr>
<tr>
<td>play and eat </td>
<td></td>
</tr>
<tr>
<td>love and roll </td>
<td></td>
</tr>
</tbody>
</table>
You can use the javascript includes() function to check if your string is a substring of the text.
$(document).ready(function() {
(function($) {
$('#filter').keyup(function() {
var filterText = $(this).val();
$('.searchable tr').hide();
$('.searchable tr').filter(function() {
return $(this).text().includes(filterText)
}).show();
})
}(jQuery));
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input id="filter" type="search" placeholder="Search"></form>
<table>
<tbody class="searchable">
<tr>
<td>love and dance </td>
<td> something else</td>
</tr>
<tr>
<td>play and eat </td>
<td></td>
</tr>
<tr>
<td>love and roll </td>
<td></td>
</tr>
</tbody>
</table>
I want to get the id of td element on it's click.
Javascript code is -
$('#example').on('click', '.alertShow', function () {
var id=$(this).closest('td').attr("Id");
alert(id);
}
And this is HTML
<table border="1" id="example">
<tr>
<td class="alertShow" id="2_0">
</td><td class="alertShow" id="2_1">
</td><td class="alertShow" id="2_2"></td>
<td class="alertShow" id="2_3"></td>
<tr>
<tr>
<td class="alertShow" id="3_0">
</td><td class="alertShow" id="3_1">
</td><td class="alertShow" id="3_2"></td>
<td class="alertShow" id="3_3"></td>
<tr>
</table>
try this:
$('#example').on('click', '.alertShow', function () {
var id=$(this).attr("id");
alert(id);
}
first of all, you have a typo in your code - replace attr("Id") with attr("id")
secondly, $(this) already refers to td, so there is no need in using closest - $(this).attr("id") is enough
$(document).on("click", "#board td", function(e) { var data = $(this).attr('id'); alert (data); });
Have you tried
$('#example td.alertShow').click(function () {
alert($(this).attr("id"));
});
You are doing it correct. Just change attr("Id") to attr("id")
Check this link-
https://jsfiddle.net/codecore/Lbq1x590/12/
Below is the Working Code for what you are trying to achieve-
https://jsfiddle.net/d5mk4q77/2/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<table border="1" id="example">
<tr>
<td class="alertShow" id="2_0">11</td>
<td class="alertShow" id="2_1">22</td>
<td class="alertShow" id="2_2">33</td>
<td class="alertShow" id="2_3">44</td>
<tr>
<tr>
<td class="alertShow" id="3_0">55</td>
<td class="alertShow" id="3_1">66</td>
<td class="alertShow" id="3_2">77</td>
<td class="alertShow" id="3_3">88</td>
<tr>
</table>
</body>
$('#example').on('click', '.alertShow', function () {
var id=$(this).closest('td').attr("Id");
alert(id);
});
If you use JQuery you can do:
$("td").click(function(){
alert(this.id)
})
If you don't use JQuery just add
<script src="jquery-1.12.4.min.js"></script>
To your <head></head> tags
You could also do (to only use the example table)
$("#example tr td").click(function(){
alert(this.id)
})
I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?
I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});
Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});
Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!
Any ideas why this doesn't work?
http://jsfiddle.net/zk4pc/2/
I'm trying to get it so that everytime there is an element with the class "insert_name", the name is printed from the table.
Could you also help me make the selection more advanced (for instance only using the data from the first tr in the "client-profile" class?
Thanks!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color">Matthew Tester
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();
jsFiddle Demo
The issue is with your node selection. When you select by class name it returns an array of elements. Since you are only looking for the div with that class name, access the first index to reference it.
var node = document.getElementsByClassName('insert_name')[0];
edit
To make this iterate all of the nodes you could take this approach
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
Alternatively, since jQuery is already included, you could remove the body's onload event and just use this
jsFiddle Demo
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
To ensure this only acts on the client-profile class the selector would be
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());
If you are just trying to insert the name rather than all of the content, this should do the trick:
$(function() {
$('.insert_name').text($('td:contains("Name:")').next().text());
});
Here is the fiddle:
http://jsfiddle.net/b8LKQ/
Hope that helps!
I added a little more jQuery:
$(function() {
$('[class*="color"]').each(function(){
$('.insert_name').append($(this).text());
});
});
http://jsfiddle.net/zk4pc/7/
Hope that helps!
I am not so good in English, to express myself, so I show it with examples to you!
Here is my HTML table with code:
<table border="1">
<tr id="tr1_1">
<td rowspan="2">1</td>
<td>tr1.1 td2</td>
<td>tr1.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr1_2">
<td>tr1.2 td2</td>
<td>td1.2 td3</td>
</tr>
<tr id="tr2_1">
<td rowspan="2">2</td>
<td>tr2.1 td2</td>
<td>tr2.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr2_2">
<td>tr2.2 td2</td>
<td>td2.2 td3</td>
</tr>
</table>
(You can see the result here)
For example, if I click on the second two rows' "up" link, the result should be this:
<table border="1">
<tr id="tr2_1">
<td rowspan="2">2</td>
<td>tr2.1 td2</td>
<td>tr2.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr2_2">
<td>tr2.2 td2</td>
<td>td2.2 td3</td>
</tr>
<tr id="tr1_1">
<td rowspan="2">1</td>
<td>tr1.1 td2</td>
<td>tr1.1 td3</td>
<td rowspan="2">
up/
down
</td>
</tr>
<tr id="tr1_2">
<td>tr1.2 td2</td>
<td>td1.2 td3</td>
</tr>
</table>
(You can see the final result here)
So how could I do this? I know the prev() and before() methods in javascript, but it merge only 1 row with 1 row, but I want to merge 2 rows WITH 2 rows!
I hope, someone can help me! Thank you!
Try this jQuery code :
$('.up').click(function() {
tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]')
tr.insertBefore(tr.eq(0).prev().prev())
return false;
})
$('.down').click(function() {
tr = $('tr[id^="'+$(this).closest('tr').attr('id').slice(0, 3)+'"]')
tr.insertAfter(tr.eq(1).next().next())
return false;
})
And have a look to your fiddle edited : http://jsfiddle.net/lulu3030/UQz8u/6/
Just some explanations :
closest('tr') method find the nearest parent which has a tr tag
slice(0, 3) get the first 3 characters of a string
=> variable tr selects all elements which has the same 3 first id characters
insertBefore and insertAfter methods allows to move selected elements
Could be done like that too:
DEMO
$(function () {
$('.up, .down').on('click', function () {
var $tr = $(this).closest('tr'),
$flag = $('<tr/>').insertBefore($tr),
$rows = $tr.add($tr.next('tr')).detach()
methods = $(this).is('.up') ? ['insertBefore', 'prevAll'] : ['insertAfter', 'nextAll'];
if ($flag[methods[1]]('tr').eq(1).length) {
$rows[methods[0]]($flag[methods[1]]('tr').eq(1));
$flag.remove();
} else $flag.replaceWith($rows);
});
});