Develop Reference

Get clicked column index from row click

I have a row click event. Recently had to add a checkbox to each row. How can I identify the clicked cell on row click event?
Or prevent row click when clicked on the checkbox.
Attempts: this.parentNode.cellIndex is undefined on the row click event.
function pop(row){
alert(row.cells[1].innerText);
}
<table style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr onclick="pop(this);">
<td><input type="checkbox" id="123456" /></td>
<td>Lonodn</td>
</tr>
</table>

Do you want something like this? You can just check the type attribute of the source element of the event and validate whether to allow it or not, you can stop the event using e.stopPropagation();return;.
function pop(e, row) {
console.log(e.srcElement.type);
if(e.srcElement.type === 'checkbox'){
e.stopPropagation();
return;
}else{
console.log(row);
alert(row.cells[1].innerText);
}
}
<table style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr onclick="pop(event, this);">
<td><input type="checkbox" id="123456" /></td>
<td>Lonodn</td>
</tr>
</table>

You should pass in the event details to your function and check the target property:
function pop(e){
// If the target is not a checkbox...
if(!e.target.matches("input[type='checkbox']")) {
alert(e.target.cellIndex);
}
}
<table style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr onclick="pop(event)">
<td><input type="checkbox" id="123456" /></td>
<td>Lonodn</td>
</tr>
</table>
Note: If you have nested elements inside the <td>, you might want to check e.target.closest("td") instead.
Note 2: You might need a polyfill for the matches method depending on which browsers you're supporting.

Here is an example if you don't want to attach a listener on every row :
document.getElementById("majorCities").addEventListener("click", function(e){
if(e.target.type === 'checkbox'){
var checked = e.target.checked;
var tr = e.target.parentElement.parentElement;
var city = tr.cells[1].innerHTML;
console.log(city+":checked="+checked);
}
});
<table id="majorCities" style="width:100%">
<tr>
<th>Select</th>
<th>Site</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>London</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>Paris</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>New-York</td>
</tr>
</table>

window.pop = function(row){
console.log('here');
var parent = row.parentNode;
Array.from(row.parentNode.querySelectorAll('tr')).forEach(function(tr, index){
if (tr === row) {
alert(index)
}
})
}
https://jsfiddle.net/sz42oyvm/

Here is for the pleasure, another example with an object containing the cities' names and a method to draw the table with ids corresponding to the name of the clicked city, so getting the clicked name is easier.
(function () {
var mySpace = window || {};
mySpace.cities = {};
mySpace.cities.pointer = document.getElementById("majorCities");
mySpace.cities.names = ["Select","City"];
mySpace.cities.data = [{"name":"Paris"},{"name":"New Delhi"},{"name":"Washington"},{"name":"Bangkok"},{"name":"Sydney"}];
mySpace.cities.draw = function(){
this.pointer.innerHTML="";
var html = "";
html+="<tr>"
for(var i=0;i < this.names.length;i++){
html+="<th>"+this.names[i];
html+="</th>"
}
html+="</tr>"
for(var i=0;i < this.data.length;i++){
html+="<tr>"
html+="<td><input id='"+this.data[i].name+"' type='checkbox'/></td>"
html+="<td>"+this.data[i].name+"</td>"
html+="</tr>"
}
this.pointer.innerHTML=html;
}
mySpace.cities.draw();
mySpace.cities.pointer.addEventListener("click", function(e){
if(e.target.type === 'checkbox'){
var checked = e.target.checked;
var city = e.target.id;
console.log(city+":checked="+checked);
}
});
})();
table {width:25%;background:#ccc;border:1px solid black;text-align:left;}
td,tr {background:white;}
th:first-of-type{width:20%;}
<table id="majorCities">
</table>

bug removing an entire row in a table using addEventListener

I need to remove an entire row in a table by clicking into a cell with the tag (remove), it works, but if I click in any other cell, the row is removed too. here is the HTML and JS code below to demonstrate using event bubbling aproach:
var table1 = document.querySelector("#tableOne");
table1.addEventListener("click", function(event) {
event.preventDefault();
event.target.parentNode.parentNode.remove();
});
<html>
<head></head>
<body>
<table>
<thead>
<tr class="product">
<td></td>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
<td>Total</td>
<td>(remove)</td>
</tr>
</thead>
<tbody id="tableOne">
<tr class="product">
<td><img src="imagens/tablet.jpg"></td>
<td>Tablet miPad 18</td>
<td>1</td>
<td>499.99</td>
<td class="item-total">499.99</td>
<td>(remove)</td>
</tr>
<tr class="product">
<td><img src="imagens/phone.png"></td>
<td>Telephone miPhone 18</td>
<td>2</td>
<td>199.99</td>
<td class="item-total">399.98</td>
<td>(remove)</td>
</tr>
<tr class="product">
<td><img src="imagens/shoe.jpg"></td>
<td>Shoe</td>
<td>1</td>
<td>99.99</td>
<td class="item-total">99.99</td>
<td>(remove)</td>
</tr>
</tbody>
</table>
</body>
</html>
the expected result is to remove the row only if I click on (remove)
If i could have some way to add a EventListener to every .removeItem would be great. Thanks everyone and Happy Easter!

You can filter events to only those where the target is a removeItem link:
var table1 = document.getElementById('tableOne');
table1.addEventListener('click', function (event) {
if (!event.target.classList.contains('removeItem')) {
return;
}
event.target.parentNode.parentNode.remove();
event.preventDefault();
});
but keep in mind that only works if the link is guaranteed to be the target when it’s clicked, i.e. when the link has no element children. Given that problem and jQuery (yeah, I know), this is more reliable:
$("#tableOne").on('click', ".removeItem", function (e) {
$(this).closest(".product").remove();
e.preventDefault();
});
If the table doesn’t have rows added dynamically, you can add event listeners to every one (questionable, but convenient):
var removeLinks = document.getElementsByClassName('removeItem');
for (var i = 0; i < removeLinks.length; i++) {
removeLinks[i].addEventListener('click', function (e) {
this.parentNode.parentNode.remove();
e.preventDefault();
});
}
and it’s possible to also bring the jQuery convenience over:
function closest(className, element) {
while (element && element.nodeType === 1) {
if (element.classList.contains(className)) {
return element;
}
}
return null;
}
var table1 = document.getElementById('tableOne');
table1.addEventListener('click', function (e) {
var link = closest('removeItem', e.target);
var row = closest('product', link);
if (!link) {
return;
}
row.remove();
e.preventDefault();
});

Click event also firing when check box check event within a row gets fired

I have checkboxes within table individual rows.
I want some event to get fired , when elsewhere in the row click happens . But when a checkbox is checked , I do not want to fire any event.
This is my markup.
<tbody data-bind="foreach:CustomerList">
<tr onclick="removepage();" onmouseover="changeRowColor(this)" onmouseout="restoreRowColor(this)">
<td>
<input class="checkbox" data-bind="attr: { Id: 'checkbox' + $data.Id },click:$parent.customerClick" type="checkbox">
</td>
<td class="col-md-4">
<span class="name" data-bind="text:customerName" />
</td>
<td>
<span data-bind="text:siteName" />
</td>
</tr>
</tbody>
So , if removepage() gets fired for everything , when
customerClick() happens , I do not want the removepage() to get fired.
I tried
customerClick: function () {
debugger;
e.stopPropagation();
},
but it did not work.
What did I do wrong ?

your customerClick function should be:
customerClick: function (event) {
event.stopPropagation();
}
,

You are using e without adding it as a parameter for the function
so just add e in your function()
customerClick: function(e) {
e.stopPropagation();
},

In java script you can stop the bubbling of event listner, because you have a few that listenrs to your event you can stop bubbling it to the other events...
event.stopPropagation()
is the method you looking for

You should bind your events like this:
$("#test > tbody > tr")
.on("click", "td:not(.notfiring)", function(){
alert("click tr");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tbody>
<tr>
<td class="notfiring">
<input class="checkbox" type="checkbox">
</td>
<td>
Col 1
</td>
<td>
Col 2
</td>
</tr>
</tbody>
</table>
I hope this helps you

Getting parent tr element from child element in jQuery

I have the following table structure in my code
<tr>
<td>Text 1 </td>
<td>Text 2 </td>
<td> <span class="edit" onclick="EditAccountInfo(id1)" /> </td>
</tr>
<tr>
<td>Text 1 </td>
<td>Text 2 </td>
<td> <span class="edit" onclick="EditAccountInfo(id2)" /> </td>
</tr>
On clicking the span in the <td>, I want to highlight the selected row (<tr>). I am using the following code in the javascript function
function EditAccountInfo(id)
{
$(this).closest('tr').css("background-color", "red");
}
I am not getting any errors and $(this).closest('tr') returns a valid object, but the background color style is not getting applied to the <tr>.
What am i doing wrong?

this is the window because you're using inline event handlers. I would recommend a more unobtrusive approach:
<span class="edit" data-account-id="id1" />
$(document).on('click', '.edit', function() {
var $tr = $(this).closest('tr');
var id = $(this).data('account-id');
//...
});

$('#my-table').on('click', '.edit', function () {
$(this).closest('tr').css('backgroundColor','red');
});

Try
$(document).ready(function () {
$('td').click(function(){
$(this).parent().css("background","red");
});
});

How do I change <tr> bgcolor with Javascript using a checkbox?

I have this html
<table border="1">
<tr>
<td>
<input type="checkbox">
</td>
<td>
Hello
</td>
<td>
my friend!
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
...
</table>
What do I need to do if I want to change my <tr> bgcolor when the checkbox is activated? I guess I will need to do something with onclick() maybe.
EDIT: What I need is that the checkbox should modify only his current row.

One of the possible approaches:
document.getElementById('table').onclick = function(e) {
var e = e || event,
el = e.srcElement || e.target;
if (el.tagName == 'INPUT') {
el.parentNode.parentNode.className = el.checked ? 'active' : '';
}
};
http://jsfiddle.net/TQbpH/2/
In this example event bubbles to the parent table which listens to it, and then it's dispatched if needed.

http://jsfiddle.net/L6xsB/
$(function () {
$('tr').on('click', 'input:checkbox', function () {
$(this).parents('tr').toggleClass('active');
});
});
CSS:
tr.active {
background-color: #FFC;
}