We Keep Coding

jquery select entire row except last column

I have a table like this :
When I click on a row, entire row are selected. For example in the image above the second row is selected. After selecting the row the name and family are displayed in the bottom of table.
If you look at the jquery code, the ajax commands are used. The problem is that when i click the Details button on each row , the Ajax scripts will run. How do i click a button without executing Ajax code?
$("#tablelist tr").click(function () {
$(this).addClass('selected').siblings().removeClass('selected');
$("#selectedUser").html("Selected User : " + $(this).find('td').eq(1).html() + ' ' + $(this).find('td').eq(2).html());
$.ajax({
//some code
});
});
.selected {
background-color: blue;
color: white;
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>rows</td>
<td>name</td>
<td>family</td>
<td>username</td>
<td>Jobs</td>
</tr>
</thead>
<tbody id="tablelist">
#foreach (var item in TableList)
{
<tr style="font-size:13px;">
<td>#counter</td>
<td>#item.FirstName</td>
<td>#item.Family</td>
<td>#item.UserName</td>
<td>
Details
</td>
</tr>
}
</tbody>

Use stopPropagation on click of the details button:
$("#tablelist tr").click(function () {...})
$("#tablelist tr a").click(function (e) { e.stopPropagation() })

You are binding your listener to the whole row, so you can't exclude part of it.
Instead, try binding to the cells you need. Instead of:
$("#tablelist tr")
Try
$("#tablelist td:not(:last-child)")
Just be aware that if you have space in your row that is not a cell, it won't fire the event. You can likely adjust padding and margins to resolve this.

hide button in a row on certain value of a column

I have an autogenerated table with tasks and their status. Each row has a button to restart the task.
I want to hide the restart button if the the value of the task isn't equal to "Error". So in other words: only the tasks with Status==Error should have a visible restart button
here is a fiddle link: https://jsfiddle.net/hwqt7c3a/5/
I have tried:
window.onload = function () {
$(function () {
$('table tr').each(function () {
var Cells = this.getElementsByTagName("td");
if (Cells[2].innerText !== 'Error') {
$(this).find('button').style.visibility = 'hidden';
}
});
});
}
but for some reason Cells is always empty.

I have updated your fiddle , Here is the working fiddle
$(function() { //document ready event
$('table tr').each(function() { //loop all tr's
var Cell = $(this).find('td:eq(2)'); //find the 3rd td cell
if (Cell.text() !== 'Error') { //check if its text is "Error"
$(this).find('button').hide(); //if try then find the button of this tr and hide it
}
});
});
Do not mix javascript and Jquery syntax,
Also you don't need both these lines
window.onload = function () { // javascript way of handling document ready
$(function () { // jquery way of handling document ready.
use either one, Since you are using Jquery library then its better you use
$(function () {
So that you dont mix up the syntaxes..
if you want the td to take up the button space in the UI but still be hidden then you have use
$(this).find('button').css("visibility","none")

;(function($){
$(document).ready(function(){
$('table tr').each(function () {
if ($(this).find("td").eq(2).text() !== 'Error') {
$(this).find('button').css("visibility","none")
}
});
})
})(jQuery)
P.s: you already use jQuery so i would recommend to not mix it with vanilla js. Try this.

You can use the :nth-child selector to check is the value is === Error and then go to the first child and remove the button with empty() function
Code:
$(document).ready(function() {
$('table tr').each(function() {
if($(this).children(':nth-child(3)').text() === 'Error'){
$(this).children(':nth-child(1)').empty();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<thead>
<th></th>
<th>ID</th>
<th>Status</th>
</thead>
<tbody>
<tr class="grid-row ">
<td class="grid-cell" data-name="">
<button type="submit">Restart</button>
</td>
<td class="grid-cell" data-name="job_id">2349</td>
<td class="grid-cell" data-name="JobStatusName">Completed</td>
</tr>
<tr class="grid-row ">
<td class="grid-cell" data-name="">
<button type="submit">Restart</button>
</td>
<td class="grid-cell" data-name="job_id">6585</td>
<td class="grid-cell" data-name="JobStatusName">Error</td>
</tr>
<tr class="grid-row ">
<td class="grid-cell" data-name="">
<button type="submit">Restart</button>
</td>
<td class="grid-cell" data-name="job_id">4564</td>
<td class="grid-cell" data-name="JobStatusName">Processing</td>
</tr>
</tbody>
</table>

Change script as per below. It have some minor change in your script for error handling.
<script>
window.onload = function () {
$(function () {
$('table tr').each(function () {
var Cells = this.getElementsByTagName("td");
if (Cells != undefined && Cells.length > 0 && Cells[2].innerText !== 'Error') {
$(this).find('button').attr("style", "visibility: hidden");
}
});
});
}
</script>

Check this Fiddle
You don't need to mix window.onLoad() with jquery
and there is argument for $.each(function(i, e){}); which gives you the iterating html element
EDIT:
$(function() {
$('table tbody tr').each(function(i, e) {
var status = $(e).find("td:eq(2)").html();
if (status !== 'Error') {
$(e).find('button').hide();
}
});
});

Passing parameters to javascript button click handler

I have a small application in MVC4. It has a grid and every row has two things.
1) ID
2) Button
When user click on a button I need to invoke a javascript function passing ID as an parameter. How can I do this in MVC. I can eaisly do thin in case of . Please help
Below is my code.
#model IEnumerable<Models.Asset>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Id
</th>
<th>
Show
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td width="80">
#item.Id
</td>
<td>
<button class="btnView" onclick="myfunction(#item.someProperty)">Show</button>
///How can I pass #item.someProperty as an parameter to click handler?
</td>
</tr>
}
</table>
<div id="imageDisplay">
<p>
</p>
</div>
#section scripts{
<script type="text/javascript">
$(function () {
$('#imageDisplay').dialog({
autoOpen: false
});
$('.btnView').click(function () {
alert('ok');
//How can I get id as an parameter to this function?
});
});
</script>
}

Firstly just remove onclick handler from the button(You don't need it as you are handling click event with jquery)
Try this :
HTML :-
<td>
<button class="btnView" data-prop="#item.someProperty">Show</button>
</td>
JQUERY :-
$('.btnView').click(function () {
var prop = $(this).attr('data-prop');
alert(prop);
});
OR
$('.btnView').click(function () {
var prop = $(this).data('prop');
alert(prop);
});
OR(if you don't want to add data-prop on button then you can follow below answer,Just catch 'Id' which is there in td of your table)
$('.btnView').click(function () {
var id = $(this).closest('tr').find('td').eq(0).text();
alert(id);
});

Remove the onclick handler from the button (you don't have a function called myfunction)
Since you already have the ID value in the previous column, you can get it using
$('.btnView').click(function () {
var id = $(this).closest('tr').children('td').eq(0).text();
});

Delete row from table using JQuery. Please see code

I used a code which I got in the net that adds a table row every onclick event. It worked perfect for me until I realized I needed to have an onclick event for every row that when clicked, it will delete the row.
Is there a way for that to happen using my code?
Please see codes below:
Javascript/JQuery code:
<script>
var counter = 2;
function addRow() {
event.preventDefault();
var newRow = jQuery('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' + counter + '"/></td></tr>');
counter++;
jQuery('table.actionsteps-list').append( newRow );
}
</script>
HTML Code:
<table class="actionsteps-list" width="510">
<tr>
<th colspan="3" align="left">Action Steps</th>
</tr>
<tr>
<td>Step #</td><td>Action Step</td><td>Owner</td>
</tr>
<tr>
<td><label>1</label></td>
<td><textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td>
<td valign="top"><input type="text" name="txtOwner1" /></td>
</tr>
</table>
<table width="510">
<tr>
<td align="right">Add Action</td>
</tr>
</table>
Thank you!

Sure, using delegation we can accomplish that.
$('table.actionsteps-list').on('click', 'tr', function(e){
$(this).remove();
});
You probably want to add a button to your row to signal a deletion, so let's assume you add (to each row):
<td><button class="delete">Delete</button></td>
Then just change your delegation method like this:
$('table.actionsteps-list').on('click', '.delete', function(e){
e.preventDefault(); // stops the page jumping to the top
$(this).closest('tr').remove();
});

Use a delegate ot catch the event at the table level, that way any new row that you add will also be handled:
$('.actionsteps-list').on('click', 'tr', function(){
$(this).remove();
});
Side note:
Don't use the javascript: protocol for inline Javascript, that's only used when you put Javascript in the href attribute of a link:
Add Action

jQuery Children selector question

I have the following code:
$("#Table1 tbody").children().each(function(e){
$(this).bind('click',
function(){
// Do something here
},
false)
});
The Table1 html table has 2 columns; one for Names and one for a <button> element.
When I click on a table row, it works fine. When I click on the button, the button code fires; however, so does the row code.
How can I filter the selector so the button doesn't trigger the parent element's click event?

This is what you want.
It's stopPropogation that will stop the parents.
<table>
<tr>
<td>The TD: <input type="button" id="anotherThing" value="dothis"></td>
</tr>
</table>
<div id="results">
Results:
</div>
<script>
$(function() {
$('#anotherThing').click(function(event) {
$('#results').append('button clicked<br>');
event.stopPropagation();
});
$('td').click(function() {
$('#results').append('td clicked<br>');
});
});
</script>
Here's a link to an example of it working as well:
http://jsbin.com/uyuwi
You can tinker with it at: http://jsbin.com/uyuwi/edit

You could also do something like this:
$('#Table1 tr').bind('click', function(ev) {
return rowClick($(this), ev);
}); //Bind the tr click
$('#Table1 input').bind('click', function(ev) {
return buttonClick($(this), ev);
}) //Bind the button clicks
function rowClick(item, ev) {
alert(item.attr('id'));
return true;
}
function buttonClick(item, ev) {
alert(item.attr('id'));
ev.stopPropagation();
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Table1">
<tbody>
<tr id="tr1">
<td>
The TD: <input type="button" id="button1" value="dothis" />
</td>
</tr>
<tr id="tr2">
<td>
The TD: <input type="button" id="Button2" value="dothis" />
</td>
</tr>
</tbody>
</table>

Is it possible to remove the button code and just run the row code, therefore kind of using event bubbling.
Another couple options:
can you add a class to the TD that has the button in it and in the selector, do '[class!="className"]'
maybe try event.preventDefault(). You can see it being used here. this way you can prevent the default action that is triggered when the button is clicked, although I'm not sure if it will completely prevent the bubbling.