We Keep Coding

how to highlight row on mouse click?

I have a table with rows of data. I am able to highlight the table when the checkbox is checked. I would like to enable the highlight and enable the checkbox on a mouse click over the table. the problem with my code now is that when I click on the check box its triggers the event for the mouse click to as the check box is part of the <tr> how can I fix this.
$('.form-check-input').on('click', function() {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.attr("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.attr("checked", true);
$(this).addClass("rowColor");
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

Issue with above code is when checkbox clicked it also trigger parent element click event. you can stop that by calling stopPropagation() for event. here is updated code
$('.form-check-input').on('click', function(e) {
e.stopPropagation();
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
$('.form-check-input').trigger("click");
return;
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td>test</td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

You had two events overlap each other because the checkbox click was bubbling to the tr click. I added e.stopPropagation(); to keep it from happening.
$('.form-check-input').on('click', function(e) {
e.stopPropagation();
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.attr("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.attr("checked", true);
$(this).addClass("rowColor");
}
});
table {
width: 100%
}
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr>
<td>&nbsp</td>
<td class="checkboxtd">
<input class="form-check-input" type="checkbox" value="" id="">
</td>
</tr>
</tbody>
</table>

First of all some other this about your code:
you should use checkBox.prop("checked", false); and not .attr to set the current state of the checkbox.
you normally want to listen to the change (or input) event on an input element if you want to get notified about a change a click. A checkbox could also be checked/unchecked by using other input devices like a keyboard.
To your problem, there are different ways of targeting the problem.
My first and highly suggested solution would be to rewrite the logic of your code: I would go with only changing the checked state of the checkbox in the tr event handler and then trigger the change event on the checkbox.
$('.form-check-input').on('change', function(e) {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
var checkBox = $(this).find(".form-check-input");
if (!$(e.target).is(checkBox)) {
// toggle the check state
checkBox.prop("checked", !checkBox.is(':checked'));
// trigger the change event
checkBox.trigger("change")
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
If you really want to keep your code that way - which I won't suggest due to the above-mentioned reason - you could go with the way to prevent the propagation of the event in the click event handler of the input element, that way it won't reach the tr element.
$('.form-check-input').on('click', function(e) {
e.stopPropagation()
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.prop("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.prop("checked", true);
$(this).addClass("rowColor");
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
The other way would be to check in the event handler of the tr element if the click event originated from the input element, using $(e.target).is(checkBox). That way you could also change your event listener to listen for change instead of click for the checkbox. But I wouldn't recommend that either.
$('.form-check-input').on('change', function(e) {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (!$(e.target).is(checkBox)) {
if (checkBox.is(':checked')) {
checkBox.prop("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.prop("checked", true);
$(this).addClass("rowColor");
}
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

I think you can do a few changes feel free to visit my solution in CodePen: https://codepen.io/juanmaescudero/pen/PojQKzm
Anyway I share you the code:
HTML:
<table id="table1" class="table table-striped">
<tbody>
<tr class="">
<td>highlight row</td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
CSS:
.rowColor {
background-color: #dfecf6;
}
JS:
$(".form-check-input").on("click", (e) => {
e = e.target;
if ($(e).is(":checked")) {
$(e.closest("tr")).addClass("rowColor");
} else {
$(e.closest("tr")).removeClass("rowColor");
}
});
Regards 😁

Button color getting changed once I click anywhere on the page, using jquery

I have a button called search at first time I click the color of button will become blue. Second time once I click anywhere on the page button color coming to its original state/color(white). How do I stop it from getting changed from blue to original color using jQuery.
<div id="dataTableDiv">
<input type="hidden" id="count" name="count" />
<table width="100%" cellpadding="0" cellspacing="0" border="0"
class="display" id="datatable2">
<thead>
<tr>
<th></th>
<th>(</th>
<th>Field</th>
<th>Conditions</th>
<th>Value</th>
<th></th>
<th>)</th>
<th>AND/OR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br clear="all" /> <input type="button" name="searchButton"
id="searchButton" value="Search" /> <input type="button"
name="resetButton" id="resetButton" value="Reset" />
</div>
Above is some part of the code. Please help!

I'm not sure this is what you are looking. check this
FIDDLE DEMO
JS:
$(document).ready(function() {
$('input#searchButton').click(function(e) {
$(this).addClass("btnactive");
});
$(document).click(function(e) {
if (e.target.id != "searchButton") {
$('input#searchButton').removeClass("btnactive");
}
});
});
CSS:
.btnactive{
background-color: blue;
color: white;
}

plain JS: , you should be able to modify if need different colors
(function(){
var sb = document.querySelector('input[name=searchButton]');
var first = true;
document.addEventListener('click', function(e){
if (first) {
sb.style.color='white';
sb.style.backgroundColor='blue';
first=false;
}
else {
sb.style.color='black';
sb.style.backgroundColor='#DDD';
}
}, false) })();
and jsfiddle: jsfiddle

Hope this helps.
HTML
<input type="button" id="search" value="Search">
<input type="button" id="reset" value="Reset">
JS
$('#search').click(function () {
$(this).css('background-color', '#0f0');
})
$('#reset').click(function () {
$('#search').removeAttr('style');
})
DEMO

Add a sample row to a table dynamically

I have a table as follows:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Remove">Remove</a>
</td>
</tr>
</table>
And I have a hyperlink:
<a class="Clone">Add</a>
What I need to do is to add the <tr class="Sample"> into the table each time I click on the
<a class="Clone">
and remove a row when I click on the <a class="Remove"> corresponding to that row.
I tried as follows :
<script>
$(document).ready(function(){
$('.Clone').click(function(){
$('#shipping').append('.Sample');
});
});
</script>
But on clicking the hyperlink the text ".sample" gets written into the table. How can I do it ?

Try:
$('a.Clone').click(function () {
$('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
$(this).closest('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td> <a class="Remove">Remove</a>
</td>
</tr>
</table> <a class="Clone">Add</a>
The first part clones the input and appends it to the table. The second part handles removing the rows (leaving the top row).

When add button is clicked call this function:
function myAddFunction(){
var html = "<tr class=Sample><td><input type=text></td><td><a class=Remove>Remove</a></td></tr>"
$('#shipping').append(html);
}
When remove button is clicked call this function:
function myRemoveFuncion(){
$(this).closest('tr').remove();
}
Hopre it helps.

I've just wrote a script for you
$( document ).ready(function() {
$(".Remove").on("click", function() {
$(this).parent().parent().remove();
});
$(".Clone").on("click", function() {
var row = $('#shipping tr:last').clone(true);
row.insertAfter('#shipping tr:last');
});
});
try this fiddle

JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#shipping').on('click', 'a.Clone', function(e){
e.preventDefault();
$('table#shipping').append( $(this).closest('tr').clone() );
});
$('#shipping').on('click', 'a.Remove', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
</script>
HTML:
<table id="shipping">
<tr class="Sample">
<td>
<input type="text">
</td>
<td>
<a class="Clone" href="#">Clone</a>
<a class="Remove" href="#">Remove</a>
</td>
</tr>
</table>

Two anchors and two tables, need to show and hide

I have two anchors and two tables, upon clicking anchor 1, I want table1 to appear and on clicking anchor2 table 1 must be closed and table 2 should appear.
My code in JavaScript for toggling between show and hide:
function setTable(what) {
if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
}
else if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
}
}
My two anchors:
<td>
I am
</td>
<td>
Photo
</td>
My two table:
<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;">
Now it works for me like, on clicking the anchor1 for the first time it shows table 1 and on second click hides table1. Same for anchor2.
But I want upon clicking anchor1 to close table 2 if opened and display table1 alone vice versa for anchor2.

Without jQuery
<td>
I am
</td>
<td>
Photo
</td>
then
function setTable(what, second) {
if (document.getElementById(what).style.display == "block") {
document.getElementById(what).style.display = "none";
} else if (document.getElementById(what).style.display == "none") {
document.getElementById(what).style.display = "block";
document.getElementById(second).style.display = "none";
}
}
Demo: Fiddle
A jQuery solution might look like
<table>
<tr>
<td>
<!--Add a class trigger to the anchor elements-->
I am
</td>
<td>
<!--Add a class trigger to the anchor elements-->
Photo
</td>
</tr>
</table>
<!--Add a class target to the tables elements-->
<table id="aboutdialog" title="Me mE me!!" style="display:none;" class="target">
<tr>
<td>1</td>
</tr>
</table>
<!--Add a class target to the tables elements-->
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;" class="target">
<tr>
<td>2</td>
</tr>
</table>
then
//dom ready handler
jQuery(function () {
var $targets = $('.target');
$('.trigger').click(function () {
var id = $(this).attr('href');
//hide all other target elements
$targets.not(id).hide();
//toggle the display of current element
$(id).toggle()
})
})
Demo: Fiddle

Just replace the function
function setTable(what){
if(what=="aboutdialog"){
document.getElementById("aboutdialog").style.display="block";
document.getElementById("stab").style.display="none";
}
else if(what=="stab"){
document.getElementById("aboutdialog").style.display="none";
document.getElementById("stab").style.display="block";
}
}

You can do something like this:
$('#iam').click(function() {
$(this).closest('#aboutdialog').show().siblings('#stab').hide();
});
$('#photo').click(function() {
$(this).closest('#stab').show().siblings('#aboutdialog').hide();
});

Try using jquery
$(document).ready(function($) {
$('#iam').click(function(){
$('#aboutdialog').show();
$('#stab').hide();
});
$('#photo').click(function(){
$('#stab').show();
$('#aboutdialog').hide();
});
});

live example is here >>
Simple with the jquery library :
$('#iam').click(function(){
$('#aboutdialog').show().siblings('table').hide();
});
$('#photo').click(function(){
$('#newdialog').show().siblings('table').hide();
});
html
I am</td>
<td>Photo</td>
<table id="aboutdialog" title="Me mE me!!" style="display:none;" >
<tr><th>abc</th></tr>
</table>
<table id="newdialog" title="Me mE me!!" style="display:none;" >
<tr><th>yaskjd</th></tr>
</table>

$(document).ready(function() {
var options = {'iam': 'aboutdialog', 'photo': 'stab'};
$('#iam, #photo').on('click', function() {
$('#aboutdialog, #stab').hide();
$('#' + options.($(this).attr('id'))).show();
});
});

redirect to another page after selecting radiobutton in mvc3

I have search box and add and edit buttons in one page.i have to edit a detail after selecting radiobutton.The script for selecting radiobutton and redirecting to next page is given below.But only alert to 'Select resume' only works.rest of code is not working.Pls help
<script type="text/javascript">
$(document).ready(function () {
var which_button;
var rad;
$('input[type="image"]').click(function (event) {
process_form_submission(event);
if (which_button == "Edit") {
if (!$("input[name='rdoUserId']:checked").val()) {
alert('Select a Resume!');
return false;
}
else {
rad = $("input[name='rdoUserId']:checked").val();
var url = "Edit/" + rad;
$('#frmIndexResume').attr("action", url);
$('#frmIndexResume').submit();
}
}
return false;
})
function process_form_submission(event) {
event.preventDefault();
//var target = $(event.target);
var input = $(event.currentTarget);
which_button = event.currentTarget.value;
}
});
</script>
<form name="frmIndexResume" method="get"action="">
<table id="tblSearch">
<tr>
<td>Name:#Html.TextBox("Names")</td>
<td>From:#Html.TextBox("FromDate")</td>
<td>To:#Html.TextBox("ToDate")</td>
<td><input type="image" value="Search" src="#Url.Content("~/images/Search.png")" width="60px"height="40px" alt="Search"/></td>
</tr>
</table>
<table id="Createbtn">
<tr>
<td>
<a href="#Url.Action("Create", "Resume")" title="Create">
<img src="#Url.Content("~/images/Create.png")" width="40px" height="30px"alt="Create"/></a>
</td>
<td>
<input type="image" value="Edit" src="#Url.Content("~/images/Edit.png")" width="40px" height="30px" alt="Edit"/>
</td>
</tr>
</table>
<table id="tblResume">
<caption>Listings</caption>
<tr>
<th>Select</th>
<th>
Name
</th>
<th>
DOB
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="radio" value="#item.Id" name="rdoUserId" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
</tr>
}
</table>
</form>

You have the radio button in a loop causing there to be duplicates of the radio button.
#foreach (var item in Model)
{
...
<input type="radio" value="#item.Id" name="rdoUserId" />
...
}
The 'name' attribute is not a unique identifier. My guess is the jQuery is picking either the last or first radio button in the form since there is more than one of them.
There may be more issues besides this with the form also.

Maybe window.location is what you are looking for.
You can easily redirect via:
window.location = url;
or via:
window.navigate(url);
Please note that the second approach maybe ie-specific.