I am currently learning JQuery and was wondering how you can only affect one cell from a table?
This is my fiddle https://jsfiddle.net/amosangyongjian/mmqasf5t/4/
This is the jquery code
$(document).ready(function(){
$("td").hover(function(){
$(this).siblings(".expand").slideDown("slow");
},function(){
$(this).siblings(".expand").slideUp("slow");
});
});
I've tried several other methods but none seem to work.
Please help.
Thank you
Try this:
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown("slow");
},function(){
$(this).find(".expand").slideUp("slow");
});
});
td {
padding:10px;
}
.expand {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello1</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello2</p>
</td>
</tr>
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello3</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello4</p>
</td>
</tr>
</table>
td doesn't have any siblings with .expand. However, p does.
So you have two alternatives, either set the event listener to td p, which also would affect the area that you can hover. So what you really want is probably to change:
$(this).siblings(".expand")
to
$(this).children(".expand")
$("td").hover(function(){
$(this).children(".expand").slideDown("slow");
}, function(){
$(this).children(".expand").slideUp("slow");
});
td {
padding:10px;
}
.expand {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello1</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello2</p>
</td>
</tr>
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello3</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello4</p>
</td>
</tr>
</table>
this is correct way when you choose via $("td")
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown('slow');
},function(){
$(this).find(".expand").slideUp("slow");
});
});
or
$(document).ready(function(){
$("td").hover(function(){
$(this).children(".expand").slideDown('slow');
},function(){
$(this).children(".expand").slideUp("slow");
});
});
your code also work when you change your code $("td p")
$("td p") -siblings will .expand
$("td") -siblings will another td datas
because siblings will it get previous element.
Related
I am creating a table in which I have draggable tr, I used TableDnD for draggable component.
The code look like the following:
$(document).ready(function () {
var iCnt = 1;
$("#tblQuestionAns tr").each(function () {
var id = "tr" + parseInt(iCnt);
$(this).attr("id", id);
iCnt++;
});
$("#tblQuestionAns").find("tr :even").addClass("even");
$("#tblQuestionAns").find("tr :odd").addClass("odd");
$("#tblQuestionAns").tableDnD({
onDragClass: "myDragClass",
onDrop: function (table, row) {
$("#tblQuestionAns").find("tr").removeClass("even odd");
$("#tblQuestionAns").find("tr :even").addClass("even");
$("#tblQuestionAns").find("tr :odd").addClass("odd");
}
});
});
This is working when I create a table like the following:
<table id="tblQuestionAns">
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test2
</td>
</tr>
</table>
but when I add span in td, it will not work, here is an example:
<table id="tblQuestionAns">
<tr>
<td>
<span>Test1</span>
</td>
</tr>
<tr>
<td>
<span>Test2</span>
</td>
</tr>
</table>
here is JSFiddle for your reference
Have you tried to disable pointer events on span?
It's working fine for me. Not sure if this is what you're trying to accomplish.
$(document).ready(function() {
var iCnt = 1;
$(".tblQuestionAns tr").each(function() {
var id = "tr" + parseInt(iCnt);
$(this).attr("id", id);
iCnt++;
});
$(".tblQuestionAns").find("tr :even").addClass("even");
$(".tblQuestionAns").find("tr :odd").addClass("odd");
$(".tblQuestionAns").tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
$(".tblQuestionAns").find("tr").removeClass("even odd");
$(".tblQuestionAns").find("tr :even").addClass("even");
$(".tblQuestionAns").find("tr :odd").addClass("odd");
}
});
});
span {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<div>
without span
</div>
<table class="tblQuestionAns">
<tr>
<td>
test1
</td>
</tr>
<tr>
<td>
test2
</td>
</tr>
</table>
<div>
with span
</div>
<table class="tblQuestionAns">
<tr>
<td>
<span>test1</span>
</td>
</tr>
<tr>
<td>
<span>test2</span>
</td>
</tr>
</table>
I have a problem that I can't solve how much I try. By clicking on the Edit Customer button I wan't to get the value from the CustomerNr cell. My problem is that I don't know how to get the row index by clicking on a button and then pass it to my function so I can specifically get the CustomerNr on that row I pressed the button on. You can take a look at my jsfiddle link and note, this is the first time I code in Javascript/Jquery. I'm open for smart solutions.
Here you can see how far I came. I managed to select value from a specific cell.
function GetCellValues() {
var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
}
I have managed to get the row index by clicking on on a td but I want to get it by pressing a button.
function myMethod(obj) {
alert(obj.parentNode.rowIndex); // parentNode is also used
}
I wan't to somehow combine this two functions, like in C#. (I'm a C# programmer)
function GetCellValues(e) {
//Something here
alert(Cells[0].Rows[e] innerText);
}
http://jsfiddle.net/6srjc7qL/
I've changed the id's of your buttons to classes, as you can't name two elements with the same id, then I looped through the elements... Working fiddle
You should avoid to use inline functions and pereferably do it like this, this might safe you a lot of time and keeps it better maintainability:
Javascript:
var a = document.getElementsByClassName('otherButton');
for (var i = 0; i<a.length;i++) {
a[i].addEventListener('click',function(){
var b = this.parentNode.parentNode.cells[0].textContent;
alert(b);
});
}
HTML:
<table id="somerow">
<tr>
<th>CustomerNr</th>
<th>Name</th>
<th>Contact</th>
</tr>
<tr >
<td>1</td>
<td>Cigarettes Inc</td>
<td>Rambo</td>
<td>
<button class="otherButton" >Edit Customer</button>
</td>
</tr>
<tr >
<td >22</td>
<td>Razor</td>
<td>David</td>
<td>
<button class="otherButton">Edit Customer</button>
</td>
</tr>
<tr>
<td>3</td>
<td>H&M</td>
<td>Samuel Adams</td>
<td>
<button class="otherButton" >Edit Customer</button>
</td>
</tr>
}
the button is inside the td which is inside the tr, so you need to go 2 nodes up. Try this:
function GetCellValues(obj) {
alert(obj.parentNode.parentNode.rowIndex);
}
HTML
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<center>
<table id="somerow">
<tr>
<th>CustomerNr</th>
<th>Name</th>
<th>Contact</th>
</tr>
<tr>
<td>1</td>
<td>Cigarettes Inc</td>
<td>Rambo</td>
<td>
<button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
</td>
</tr>
<tr>
<td onclick="myMethod(this);">22</td>
<td>Razor</td>
<td>David</td>
<td>
<button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
</td>
</tr>
<tr>
<td>3</td>
<td>H&M</td>
<td>Samuel Adams</td>
<td>
<button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
</td>
</tr>
</center>
</body>
</html>
JS
function GetCellValues(elm) {
alert(elm.parentNode.parentNode.cells[0].textContent);
}
function myMethod(obj) {
alert(obj.parentNode.rowIndex);
}
Trying to use JQuery. On mouse hover event I wanna change the color of background of TDs.
This is what I have tried so far. But not working at all.
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('.row1td1').hover(function() {
$('.row2td1').css('color', 'red');
}, function() {
$('.row2td1').css('color', '');
});
</script>
<head>
<!-- Bring to you by http://www.CSSTableGenerator.com -->
<link rel="stylesheet" href="table.css" type="text/css"/>
</head>
<body>
<div class="CSS_Table_Example" style="width:600px;height:150px;">
<table >
<tr>
<td id="row1td0">
Title 2
</td>
<td id="row1td1">
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td id="row2td0">
Title 1
</td>
<td id="row2td1">
Title 2
</td>
<td>
Title 3
</td>
</tr>
</table>
</div>
</body>
</html>
You shouldn't be using jQuery for that, but the problem is that you use id="row2td1", and then try to access it as a class.
Try this CSS:
#row2td1:hover {color:red}
As the other two said, you need to make sure you are tagging by ID and not by class, as well as making sure that the document is ready before doing any jQuery (which I personally believe to be the best for this situation).
$(document).ready(function(){
$(#row1td1).hover(function() {
$(#row2td1).css('color', 'red');
}, function() {
$(#row2td1).css('color', '');
});
});
As I addressed in your question you said you want to change color or background color of TDs so I am gonna give you another solution which is derived from Kolink may be use full to you.
HTML
<table >
<tr>
<td class="row" id="row1td0">
Title 2
</td>
<td class="row" id="row1td1">
Title 2
</td>
<td class="row">
Title 3
</td>
</tr>
<tr>
<td class="row" id="row2td0">
Title 1
</td>
<td class="row" id="row2td1">
Title 2
</td>
<td class="row">
Title 3
</td>
</tr>
</table>
and add css to your code
.row:hover {color:red}
Hope it will be use full for you...
Your code is not waiting till the DOM is ready, try this :
$(function(){
$('#row1td1').hover(
function() {
$('#row2td1').css('color', 'red');
},
function() {
$('#row2td1').css('color', '');
}
);
});
I want the serial no: to increase whenever a row is inserted dynamically. and when any row is deleted whether in the beginning or in the end or in-between, the numbers should rearrange themselves in proper order. I'm a fresher and could not get a logic on how to do it. Can anyone pls guide me on the same. Thanks in advance for the support.
I have given my sample coding below. On clicking the "(+)" button, the row increases automatically. when that is happening, i want the serial no also to increment automatically. And when any row is deleted, (even in middle of the table), then the numbers should automatically adjust themselves in proper order. Pls guide me on the same.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
var serial =1;
$('#butVal').click(function(){
var master = $(this).parents("#table-2");
id++;
var sample = master.find('.tabRow').clone();
sample.attr("id", id + "item");
master.find('.tabRow').removeClass('tabRow');
master.find('tbody').append(sample);
//alert(master);
//alert(sample);
//alert(sample.html());
//alert(master.html());
var rowLen = $('#table-2 > tbody >tr').length;
//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}
}
);
$('table#table-2 button.remove').live('click', function(){
if($("table#table-2 tbody tr").length > 1)
{
if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
{
$(this).parents('tr').prev().addClass("tabRow");
}
$(this).parents('tr').remove();
}
else
{
alert("you can.t remove this record");
}
} );
});
//jquery ends here
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:90%;
height:1250px;
margin-left:auto;
margin-right:auto;
}
.add
{
width:100%;
}
.add select,input
{
width:100%;
}
</style>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr><th class="small"> S.No</th><th> Product Status </th> <th> Stock Status</th> <th class="sizing"> Description</th> <th> Quantity </th> <th> Price </th> <th> Total </th >
<th> <button id="butVal"> + </button></th></tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno"> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/> </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Grand Total </td>
<td> </td>
<td> <button id="proceed" onClick="payment();"> Proceed </button> </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
I made some changes to your code at jsfiddle.net. The link is: http://jsfiddle.net/2nzgG/30/. All my comments can be found in the javascript section. I hope this is what you are looking for. Let me know if you need anything else.
EDIT:
I also added the code below, but the comments will be found in the link...
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
//FOR Serial Number- use ON
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});
I have this:
<table id="myTable" style="width: 650px;">
<thead>
<tr style="font-weight: bold;">
<td>Name</td>
<td>Price</td>
<td>Supplier</td>
<td>Amount</td>
<td>Add</td>
</tr>
</thead>
<tbody>
<tr>
<td>Fish</td>
<td>299</td>
<td>BlueHouse</td>
<td>
<form action="method">
<input type="hidden" name="product_id" value="1" />
<input class="hideme" type="text" name="amount" value"" />
</td>
<td>
<input class="hidden" type="button" name="Add" />
</form>
</td>
</tr>
</tbody>
</table>
With the JS:
$(document).ready(function(){
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
});
CSS:
.highlight{
background: #CCC;
}
.hideme{
display: none;
}
Which works like when you click on one of the 's thats inside , then it will highlight it by toggling the CSS class "highlight".
Now what I would like to do also is showing the input fields that has the class "hideme".
First I thought to do $('.hideme').show(), but since there's more 's than one, this wouldnt work. And i would like it to show the input fields for the current toggled .
So when you click again on the tr to toggle 'off' (so it doesnt have the highlight class), i would like to have the input fields to hide again.
Hope you understood, otherwise just comment.
How can i do this?
Add '$(this).find('.hideme').toggle(); to the tr click event.
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
$(this).find('.hideme').toggle();
});
jsfiddle - http://jsfiddle.net/pdbQH/1/
$(document).ready(function(){
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
$(this).find('input[type=text]').toggleClass('hideme');
});
UPDATE To avoid the toggle when you focus on the INPUT
$('#myTable > tbody tr').live('click', function(event){
if(event.target.tagName == 'INPUT') return false;
$(this).toggleClass('highlight');
$(this).find('.hideme').toggle();
});