This question already has answers here:
addEventListener to an article element in Javascript
(2 answers)
Closed 5 years ago.
I'm trying to perform a mouseover event on my table rows using Javascript. I understand CSS would better accomplish this task but I would like to learn how to do it in Javascript is well.
Here is my Code:
var tableRows = document.getElementsByTagName('tr');
tableRows.addEventListener("mouseover", rollOver);
function rollOver() {
alert('you scrolled over a table row');
}
<table>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
</table>
Console.log seems to indicate that "addEventListener" is not a function. What am I doing wrong here? Any thoughts?
Thank you!
As tableRows will return object .addEventListener will not work with it...so looping them and use will..
var tableRows = document.getElementsByTagName('tr');
for (var i = 0; i < tableRows.length; i += 1) {
tableRows[i].addEventListener('mouseover', function(e){
console.log("sdsd");
});
// or attachEvent, depends on browser
}
<table>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
</td>
</tr>
<tr>
<td>
Cell 3
</td>
<td>
Cell 4
</td>
</tr>
<tr>
<td>
Cell 5
</td>
<td>
Cell 6
</td>
</tr>
</table>
Related
I have a table on a web page, I am trying to add multiple rows after first, second or third row dynamically.
<table class="sort-table">
<tr>
<th>State Owner</th>
<th>Number of Orders</th>
<th>Commission Total</th>
</tr>
<tr>
<td class="so_details" data-name="Adam Howard" data-soid="2"><a class="so_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="2">Total</td>
<td class="currency align-right total">0.00</td>
</tr>
</table>
I have created some new tr elements dynamically. following is the html
<tr>
<td>ID1000</td>
<td class="op_details" data-name="Adam Howard" data-opid="ID1000"><a class="op_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr>
<td>ID06</td>
<td class="op_details" data-name="Cory McEwen" data-opid="ID06"><a class="op_link">Cory McEwen</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="3">Total</td>
<td class="currency align-right total">0.00</td>
</tr>
I want to insert the newly generated HTML tr elements after the first row or second or third etc.
I also want to adjust four td elements in newly created tr under the three td elements of a specific tr. as you can see in the code.
I have tried
let html = `<tr>
<td>ID1000</td>
<td class="op_details" data-name="Adam Howard" data-opid="ID1000"><a class="op_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr>
<td>ID06</td>
<td class="op_details" data-name="Cory McEwen" data-opid="ID06"><a class="op_link">Cory McEwen</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="3">Total</td>
<td class="currency align-right total">0.00</td>
</tr>`
(html).insertAfter($(this).closest('tr'));
//$('.sort-table > tbody > tr').eq(1).after(html);
But nothing happened to dom and it remains unchanged. Please help me in this regard.
JQuery insertAfter() or insertBefore() function can do your job.
insertAfter() // inserts after a selected element
insertBefore() // inserts before a selected element
syntax
$("Your html goes here").insertAfter($('yourtable selector tr:eq(row
index after which you want to insert the html)'));
Here is an example.
<table class="sort-table">
<tr> <td> 1 </td> </tr>
<tr> <td> 2 </td> </tr>
<tr> <td> 3 </td> </tr>
<tr> <td> 4 </td> </tr>
<tr> <td> 5 </td> </tr>
<tr> <td> 6 </td> </tr>
</table>
Now Javascript
var dynamicRow = `<tr>
<td>will insert after first row </td>
</tr>`;
$(dynamicRow).insertAfter($(".sort-table tr:eq(0)")); // 0th index is first-row
// The above 0th index using eq(0) can also be achieved using first-child pseudo selector
$(dynamicRow).insertAfter($(".sort-table tr:first-child"))
// if you want to insert after last row
dynamicRow = `<tr>
<td>will insert after last row </td>
</tr>`;
$(dynamicRow).insertAfter($(".sort-table tr:last-child"));
Note: to give the row index in tr:eq(rowindex), always remember that
it starts from 0 not 1. so
:eq(0) means first-row
:eq(1) means second-row
:eq(9) means (9+1) = 10th row
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using Jquery to add a table row into an existing table. The I'm adding has two columns. One simple string, the other has a small button. I'd like a click on the button to remove its parent element in the most elegant way, ideally without calling an external JS function. IS that possible?
just use .closest and .remove in the click handler for the button
jQuery(this).closest('tr').remove()
closest will find the closest parent element matching the passed selector, and remove as the name implies will remove it.
And since you say you are adding the rows to an existing table you can use delegation to deal with new rows and not have to add new click listeners every time you add a new row.
jQuery(document).on("click",".removeBtn",function(){
jQuery(this).closest('tr').remove()
});
Demo
jQuery(".removeBtn").click(function(){
jQuery(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Sample row</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
<tr>
<td>Sample row 2</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
<tr>
<td>Sample row 3</td>
<td><button class="removeBtn">Remove</button></td>
</tr>
</table>
$(document).ready(function() {
$(document).on('click', '.remove', function() {
$(this).closest('tr').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
This is Item 1
</td>
<td>
This is still Item 1
</td>
<td>
<button class="remove">This is Button 1</button>
</td>
</tr>
<tr>
<td>
This is Item 2
</td>
<td>
This is still Item 2
</td>
<td>
<button class="remove">This is Button 2</button>
</td>
</tr>
<tr>
<td>
This is Item 3
</td>
<td>
This is still Item 3
</td>
<td>
<button class="remove">This is Button 3</button>
</td>
</tr>
<tr>
<td>
This is Item 4
</td>
<td>
This is still Item 4
</td>
<td>
<button class="remove">This is Button 4</button>
</td>
</tr>
</tbody>
</table>
My web application collects data with:
id (key value)
timestamp
value
Then, it creates an HTML table like this:
<table>
<tr bgcolor="#FFA9A9">
<td> ID1 </td>
<td> 20150619T09.43.03</td>
<td>VALUE1</td>
</tr>
<tr>
<td> ID2 </td>
<td> 20150619T09.43.02</td>
<td>VALUE1</td>
</tr>
<tr bgcolor="#FFA9A9">
<td> ID3 </td>
<td> 20150619T09.43.00</td>
<td>VALUE2</td>
</tr>
<tr>
<td> ID4 </td>
<td> 20150619T09.42.59 </td>
<td> VALUE1</td>
</tr>
<tr bgcolor="#FFA9A9">
<td> ID5 </td>
<td> 20150619T09.42.59 </td>
<td> VALUE2</td>
</tr>
<tr>
<td> ID6 </td>
<td> 20150619T09.42.58</td>
<td>VALUE2</td>
</tr>
<tr>
<td> ID7 </td>
<td> 20150619T09.42.55 </td>
<td> VALUE2 </td>
</tr>
<tr bgcolor="#FFA9A9">
<td> ID8 </td>
<td> 20150619T09.42.40 </td>
<td> VALUE2 </td>
</tr>
<tr>
<td> ID9 </td>
<td> 20150619T09.42.39 </td>
<td> VALUE2 </td>
</tr>
</table>
Explanation:
It sorts the timestamp value in DESC order.
If, for example, t1 is the timestamp for ID1 and 't2' is the timestamp for ID2, and...
t1 + 2 seconds >= t2
the ID2 row becomes red.
In my example:
ID1 is red (#FFA9A9) cause of ID2 (same value and timestamp between 2 sec)
ID3 is red cause of ID5 that is red cause of ID6.
ID8 is red cause of ID9
in that case ID1 is a copy and ID2 is original; ID3 and ID5 are a copy and ID6 is the original; ID8 is a copy and ID9 is it's original.
I've got to count the red copy and put the counter in another cell of the row that is the original.
The result of my example should be:
<table>
<tr>
<td> ID2 </td>
<td> 20150619T09.43.02</td>
<td>VALUE1</td>
<td>1</td> --> one record not shown (ID1)
</tr>
<tr>
<td> ID4 </td>
<td> 20150619T09.42.59 </td>
<td> VALUE1</td>
<td> 0 </td>
</tr>
<tr>
<td> ID6 </td>
<td> 20150619T09.42.58</td>
<td>VALUE2</td>
<td>2</td> --> two records not shown (ID3 and ID5)
</tr>
<tr>
<td> ID7 </td>
<td> 20150619T09.42.55 </td>
<td> VALUE2 </td>
<td> 0 </td>
</tr>
<tr>
<td> ID9 </td>
<td> 20150619T09.42.55 </td>
<td> VALUE2 </td>
<td> 1 </td> --> one record not shown (ID8)
</tr>
</table>
I need it because i've got 3 data collector and i need to understand which event is the same one repeated... If the value is the same and the timestamp are between 2 sec it is the same event and i need to take only the older one in table but i need also show that exists other captured copy of it...
Any help?
I can change class, name or anything else, but i need to do it when the html page is loaded and client side (so javascript or jQuery)...
I need to:
scan table row by row from first to last
understand if it is a red row
if it is a red row I need to start a count of red rows with same value before a row not red with the same value. then i put the counter in a new cell of the same not red row...
Thank you very much!!! (and sorry for my bad english!)
With jQuery you can select all tr elements with the attribute bgcolor="#FFA9A9" then use .size() or .length to get the count.
jQuery('tr[bgcolor="#FFA9A9"]').size();
api.jquery.com/attribute-equals-selector
Hope that is useful.
Edit: With the red lines selected like above you can also run an .each() over the selected elements and analyse their .children()
Edit 2: Maybe this is a useful approach?
trs = jQuery('tr:not[bgcolor="#FFA9A9"]');
redtrs = jQuery('tr[bgcolor="#FFA9A9"]');
for (i in trs)
{
tds = trs.eq(i).children('td');
for (j in redtrs)
{
redtds = redtrs.eq(j).children('td');
//do your checking here
}
}
the idea is to select all trs which are not red and all trs which are red.
Then iterate over the non-red trs and check their children tds against the red trs children tds (assuming the order of the tds is always the same). tds.eq(0) is the ID, tds.eq(1) is the time stamp tds.eq(2) the Value. So you can compare tds.eq(2) == redtds.eq(2) to match the values.
When you have a find you could up a counter and end up adding a fourth td with the counter value.
Try reading in on the jQuery selectors and the Javascript for in loop (or the jQuery.each which can be a bit more confusing for beginners though).
This is what i have right now:
This is the table:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</table>
This is the javascipt
<script>
function hello(){
var r = document.getElementById("trId1").innerHTML;
alert(r);
}
</script>
The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution
To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table:
<table border='1'>
<thead>
<tr>
<th>
Employee Code
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr class='display' onclick='hello(1);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(2);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</tbody>
</table>
Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<script>
function hello(rowClickedNumber){
var RowClicked = document.getElementsByClassName("trId1");
var r = RowClicked[0].innerHTML;
alert(r); //E100
var r = RowClicked[1].innerHTML;
alert(r); //E200
var r = RowClicked[rowClickedNumber].innerHTML;
alert(r);
}
</script>
However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads:
$(body).on("click", "tr", function(){
var getData =$(this).children(".trId1").getHTML();
console.log(getData);
});
Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row).
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.
I have a solution for this. Please check the code and fiddle link below. Let me know if you have any question.
Fiddle
HTML:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
</table>
JavaScript:
function hello(obj){
alert(obj.childNodes[1].innerText); //The first child being a text node.
}
In simple form my html table is such:
Article | description | links | price
<table>
<tr>
<td>
</td>
OC 90
<td>
ololooo
</td>
<td>
</td>
<td>
123
</td>
</tr>
<tr>
<td>
OC90
</td>
<td>
some other ololo
</td>
<td>
link
</td>
<td>
123
</td>
</tr>
<tr>
<td>
OC 90
</td>
<td>
other other oloooloo
</td>
<td>
</td>
<td>
321
</td>
</tr>
</table>
But how can i do, that i delete from my table duplicates, but!!! only if first column (also make it uppercase and delete freespaces when check) and last td (so article and price are same), but main trouble is to left in table such row, which in third column has link's...
After that my table must look:
<table>
<tr>
<td>
OC90
</td>
<td>
some other ololo
</td>
<td>
link
</td>
<td>
123
</td>
</tr>
<tr>
<td>
OC 90
</td>
<td>
other other oloooloo
</td>
<td>
</td>
<td>
321
</td>
</tr>
</table>
I have tried something like this:
var seen = {};
$('table tr').each(function() {
var tr = $(this).clone();
if(tr.not(':input')){ //tried for input, is not strange)
tr.find("td:eq(2)").remove();
tr.find("td:eq(3)").remove();
// tr.find("td:eq(2)").remove();
var txt = tr.text().toLowerCase().replace(/\s+/g, '');;
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
}
}
});
but this doesn't help's me....
also full-version table is here:
http://jsfiddle.net/STrm5/1/
Please help me to delete duplicates from table....
Try with this :
var seen = {};
$('#table tr').each(function () {
var tr = $(this).clone();
if (tr.not(':input')) {
tr.find("td:eq(1)").remove();
tr.find("td:eq(1)").remove();
var txt = tr.text().toLowerCase().replace(/\s+/g, '');
if (seen[txt]) $(this).remove();
else seen[txt] = true;
}
});
Sample