This question already has answers here:
How to highlight the table row on mouse hover
(3 answers)
Closed 6 years ago.
I am trying to highlight a row while I am on a specific row . I had to use onmouseover.
But it is not happening for me.
This is the table definition in cshtml.
<table class="table">
<thead>
<tr>
<th class="severityCheck"><input type="checkbox" value="" /></th>
<th>Customer Name</th>
<th>Site Name</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach:CustomerList">
<tr onclick="removepage();" onmouseover="changeRowColor(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>
</table>
To highlight on mouseover , I wrote the changeRowColor as :
function changeRowColor(row) {
row.addClass = 'active';
}
But the class is not being reflected. But when I do
row.style.backgroundColor= 'red';
it's happening.
What am I doing wrong ?
Also , I have to highlight the current row only when the mouse is on top of this and not highlight when mouse leaves.
How would I do that ?
why not use css
table tr:hover td{background-color:red;}
Related
This question already has answers here:
contenteditable change events
(21 answers)
Closed 4 years ago.
this seems pretty simple but I cannot figure out a solution for it.
I have an HTML table such as
$('#result_table td').on('change', function() {
console.log("Row Changed!")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="result_table" class="table table-hover">
<thead>
<tr>
<th>Blah</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>bleh</td>
<td>False</td>
</tr>
<!-- If Error, make it editable but highlight row red-->
<tr bgcolor="#FF9494">
<td contenteditable="true">blah_error</td>
<td contenteditable="true">True</td>
</tr>
</tbody>
</table>
What I am trying to do is if you click and edit the editable content, change the table row background colour to a different colour. I'm just stuck with trying to figure out the jQuery.
use the blur event on the td, as soon as you leave the cell it will trigger your event
$('#result_table td').on('blur', function() {
console.log("Row Changed!")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="result_table" class="table table-hover">
<thead>
<tr>
<th>Blah</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>bleh</td>
<td>False</td>
</tr>
<!-- If Error, make it editable but highlight row red-->
<tr bgcolor="#FF9494">
<td contenteditable="true">blah_error</td>
<td contenteditable="true">True</td>
</tr>
</tbody>
</table>
In html table i have checkbox for each row. by clicking on check box it has to select person name of the table. but it is not working. and i want to provide validation for this check box user can select only check box at a time.
HTML:
<table id="personTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">
<input type="checkbox" id="check_selectall_b" onclick="selectAll(this)"/>
SA
</th>
<th>person name</th>
<th> address</th>
</tr>
</thead>
<tbody class="person_table">
<% #persons.all.each do |person| %>
<tr id="tr_prns_<%=person.id %>">
<td>
<input type="checkbox" class="radio" name="checkBox[]"
onchange="personClickedBox(this.name)"/>
</td>
<td class="person" style="word-break:break-all;">
<%= person.name%>
</td>
<td class="person" style="word-break:break-all;">
<%= person.address%>
</td>
</tr>
<% end %>
</tbody>
</table>
JAVASCRIPT:
function personClickedBox(checkBoxName){
var values = new Array();
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"),
function () {
values.input($(this).text().trim());
});
}
by clicking on check box it has to select person name
Your code get the clicked check box value perfectly. What you need to do is add a css style to select the specific raw
This question already has answers here:
How to create a dialog with “Ok” and “Cancel” options
(17 answers)
Closed 7 years ago.
I have a html code and I want when I click delete to delete current row, then show the confirm " You want to delete [Name]?"
So, how can I get name value to confirm when I click delete using Jquery?
<table id="tblInfo">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Birthday</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name1</td>
<td>01/01/1990</td>
<td>
<a href="#" class="btnView" >View</a>
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Name2</td>
<td>01/01/1990</td>
<td>
View
Delete
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="text" name="" value="" size="25" /></td>
<td><input type="text" name="" value="" size="25" /></td>
<td>
Add
</td>
</tr>
</tfoot>
</table>
demo: http://jsfiddle.net/1qda1jpx/1/
$(document).ready(function() {
$("#tblInfo").on("click", ".btnDelete", function() {
var $this = $(this);
var name = $this.closest("tr").find("td:nth-child(2)").text(); // gets the name of the row
if (confirm("Do you want to delete" + name + "?"))
{ $this.closest('tr').remove(); } // upon confirmation, remove the row
});
});
You need to find the the closest tr element and then get the text from the 2nd td element.
here is the working jsfiddle for this problem.
$(document).ready(function(){
$('.btnDelete').click(function(){
var selectedName = $($(this).closest("tr").children()[1]).text();
console.log("Selected name is "+ selectedName);
});
});
https://jsfiddle.net/rbdharnia/03gbLhu4/1/
In the screenshot, I want to be able to use the onClick event of the edit image to make the 5 proceeding text boxes of the same row editable. By default I have set them 'readonly'. I have looked for other solutions but I am not sure how to reference the current row.
<table class = "idtable" cellspacing="0">
<tr style="background-color:#999999;color:white">
<th width="200px" class="tablehead">Type</th>
<th width="200px" class="tablehead">Value</th>
<th width="200px" class="tablehead">State</th>
<th width="200px" class="tablehead">Status</th>
<th width="200px" class="tablehead">Entry Date</th>
<th width="100px" class="tablehead">Edit</th>
<th width="100px" class="tablehead">Delete</th>
</tr>
<tr style="text-align:center">
<td class="idtable-borderleft"><input id="idType" class="readonly" type="text" value="INSTSERVICES" readonly></td>
<td class="idtable-bordermid"><input id="idValue" class="readonly" type="text" value="1234 " readonly></td>
<td class="idtable-bordermid"><input id="idState" style="font-size:85%" class="readonly" type="text" value="UNMODIFIED" readonly></td>
<td class="idtable-bordermid"><input id="idStatus" class="readonly" type="text" value="Active" readonly></td>
<td class="idtable-bordermid"><input id="idStartDate" class="readonly" type="text" value="2015-03-17" readonly></td>
<td class="idtable-bordermid"><img onclick="editRow()" src="https://localhost:8443/xxxxx/images/edit.png"></td>
<td class="idtable-borderright"></td>
</tr>
<tr>
<td colspan="7"><input style="margin-left:50%; margin-top: 5px" type="submit" value="Update"></td>
</tr>
</table>
Don't use the onClick tag.
Attach to the click event using jQuery, then traverse the DOM to find the row and finally manipulate the input tags.
In this example, I assume that you added a class of btnedit to the image:
$('.idtable .btnedit').click(function(){
var row = $(this).closest('tr'); //find the parent row
var inputs = $('input', row); //find all the inputs inside the row
inputs.prop('readonly', false); //change the attribute
});
Fiddle: http://jsfiddle.net/o26q8w6j/
You need to use something like jQuery editable.
Try double clicking text in below demo
http://www.appelsiini.net/projects/jeditable/default.html
You need to fire ajax call to update data in database.
Introduction:
I am new to JQuery and have a requirement wherein I need to implement a scenario of adding few rows on single click and deleting the added rows on double click.
Complete Scenario:
I have two tables in a page i.e. top parent table and below child table.
There are rows in parent table which needs to be clicked or double clicked.
Scenarios:
1)First Requirement is that on each single click on any of the rows of parent table, 5 rows should be added in the child table below i.e if there are 5 single clicks on row number 3 then total 25 rows should be added in the child table.
2)Second Requirement is that on each double click on any of the rows of parent table, all corresponding rows which were added on single click on the parent table's row should be deleted i.e. if row number 3 is double clicked all the 25 rows that were added corresponding to row number 3, in child table should be deleted.
Would need help in resolving the same.
HTML Code:
<div style="overflow: scroll; width: 1455px;height:175px;" class="tree">
<table class="boldtable" id="packagelisttable" style="width: 100%">
<caption>
<b style="font-size: 20px">Package List</b>
</caption>
<tr class="tableHeaderRow">
<th class="columnHeader">Distributable Name</th>
<th class="columnHeader">Version</th>
<th class="columnHeader">Modality</th>
<th class="columnHeader">Machine Name</th>
<th class="columnHeader">Machine Type</th>
<th class="columnHeader">Machine Version</th>
<th class="columnHeader">Machine Version2</th>
<th class="columnHeader">Last Registered By </th>
<th class="columnHeader">Last Registered On </th>
</tr>
<tr class="lightData">
<td class="columnHeader">Installer1</td>
<td class="columnHeader">1</td>
<td class="columnHeader">CT1</td>
<td class="columnHeader">ABCD</td>
<td class="columnHeader">Dell</td>
<td class="columnHeader">1</td>
<td class="columnHeader">1</td>
<td class="columnHeader">User </td>
<td class="columnHeader">11-10-2014 </td>
</tr>
<tr class="darkData">
<td class="columnHeader">Installer2</td>
<td class="columnHeader">1</td>
<td class="columnHeader">CT1</td>
<td class="columnHeader">PQRS</td>
<td class="columnHeader">Dell</td>
<td class="columnHeader">1</td>
<td class="columnHeader">1</td>
<td class="columnHeader">User </td>
<td class="columnHeader">14-10-2014 </td>
</tr>
</table>
</div>
</div>
$( "#buttonid" ).click(function() {
//your code
});
$( "#buttonid" ).dblclick(function() {
//your code
});