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");
});
});
Related
I have a table and I want to have two different onclick on tr and only on td.
to do this I have two function:
function goToLink(url) {
location.href = url ;
}
function goToLinkTd(e,url) {
if (!e) var e = window.event; // Get the window event
e.cancelBubble = true; // IE Stop propagation
if (e.stopPropagation) e.stopPropagation();
location.href = url ;
}
<tr onclick="goToLink('http://tahrircenter.com/product/bb/url')">
<td>1</td>
<td>10013</td>
<td>عنوان</td>
<td>
-
</td>
<td>10</td>
<td>
<p class="">0</p>
</td>
<td onclick="goToLinkTd(event,'http://tahrircenter.com/product/bb/url#price-change')">
<img src="http://tahrircenter.com/assets/frontend/_img/_svg/chart.svg" alt="" class="table-chart">
</td>
</tr>
but when I click on my row(tr) it goes to td's link.
http://tahrircenter.com
Use jquery events and give tr and td different classes
$(function(){
$('tr td.someClass').click(function(){
//Code here
})
$('tr.ClassName').click(function(){
//Code here
var attributeValue=$(this).attr("customName"); // you
})
})
Apply custom attribute in html
<tr customName="http://tahrircenter.com/product/bb/url">
<td></td>
I have a table on which if I click any row it is supposed to return the row "id" number.I have used closest() function.But the issue is the closest() selects all the "tr" below it. Is there any way to limit the function to traverse only one row data.
For example my table
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
If I click the third row that is id=2, it should return only that individual id and td(data2).
This is the code that I am trying as for now.
$("#myTable tr").click(function(){
trid = $(this).closest('tr').attr('id');
alert(trid);
return trid;
});
I have tried using next() or find() but I end up getting the Undefined error.Thanks.
I think you have misunderstood the concept of .closest(). It traverses up to the parents upward, while .find() traverses downwards to the children/grandchildren.
So as per your code it seems that you want to have the id of the clicked element. then you can just do this:
trid = this.id;
as in your code this refers to the tr you are clicking on.
Note:
Just noticed that you are using a global var named trid because it does not have the var keyword. So if you have accidently used it then you can add var trid like this in the above code.
$(document).on('click', 'td', function() {
var result = $(this).closest('tr').attr('id');
alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
</table>
Try this
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
//if you want to get to the td of it
var tdVal = $(this).find('td').html();
});
by clicking on tr, you do not need to use .closest() to access its id, just get its id using the .attr('id')or .prop('id') or even simply .id as follows:
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
});
I have the following html table:
<tbody>
<tr>
<td class="rich-tabpanel-content">
<table>
<tbody>
<tr>
<td>
<span class="bold">Overview</span>
</td>
</tr>
<tr>
<td>
<input class="titleInput" type="text"></input>
</td>
</tr>
<tr>
<td>
<span class="bold">Shorttext</span>
</td>
</tr>
<tr>
<td>
<textarea class="shorttextInput"></textarea>
</td>
</tr>
<tr>
<td>
<span class="bold">Longtext</span>
</td>
</tr>
<tr>
<td>
<textarea class="longtextInput"></textarea>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Now i want to select these tags in DOM:
<span class="bold">Overview</span>
<span class="bold">Shorttext</span>
<span class="bold">Longtext</span>
I have written these line of JQuery and Java Script Code to change the value of these HTML Tags, but the command
"jQuery(value).parent().prev();"
doesn´t select the right html tag in the DOM:
jQuery('.titleInput').each(function(index, value) {
selectAndExpand(value);
}
function selectAndExpand(value) {
var captionCell = jQuery(value).parent().prev();
captionCell.empty();
var newCaption = '<span class="bold">' + "HERE IS MY NEW INPUTVALUE" + '</span>';
captionCell.append(newCaption);
};
How can i solve this problem?
It is important to navigate for example from the node
<textarea class="longtextInput"></textarea>
to
<span class="bold">Longtext</span>
or from
<input class="titleInput" type="text"></input>
to
<span class="bold">Overview</span>
Use:
$('.bold').each(function(){
$(this).html("HERE IS MY NEW INPUTVALUE")
});
Working Fiddle
With Javascript:
var elements = document.getElementsByClassName('bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);
With jQuery:
var elements = $('.bold');
console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);
or...
console.log($('td:contains("Overview")'));
console.log($('td:contains("Shorttext")'));
console.log($('td:contains("Longtext")'));
Cheers.
You can select them by class name (when the class name is the same, in your case "bold"):
$(".bold");
To select all textareas after them and set values to these "bold" - element use
var spans = $(".bold");
$.each(spans, function(index, item) {
var spanTd = $(item).closest("tr");
var value = $(spanTd).next().find("textarea").val();
if (value === undefined) { //if there aren't textarea - get textbox.
value = $(spanTd).next().find("input[type='text']").val();
}
$(item).html(value);
});
EDIT: Demo - http://jsfiddle.net/h9fpy/
use class selector in your case use $('.bold') to select the span class bold and you can easily navigate to prev and next like $('.bold').parent('tr').next().find('.bold'); and also give the bold class to your input elements so that we can easily navigate.
I have a table structure:
<table style="width: 100%;">
<tr>
<td>
one
</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>
Four
</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>
Seven
</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</table>
CSS:
.yy
{
background-color: red;
}
Now the problem is if I click on the <a> its corresponding <tr> element (<tr> that holds the <a>) background should be red, again if I click on the same <a> it should come back to normal.
How to identify the the <tr> on which the <a> is clicked.
EDIT:
I tried:
$(".yy").not($(this).parent().parent()).removeClass("yy");
$(this).parent().parent().toggleClass("yy");
it worked.
$('a').live('click', function(){
$(this).parent().parent() //this is how you select the <tr> that the <a> is in
//first .parent() gets the <td> second .parent() gets the <tr>
});
Let me know if you need more. There might be a better way but I'm not positive.
I think closest() should get what you are looking for.
$('a').click(function() {
var tr = $(this).closest('tr');
tr.toggleClass('yy');
});
This way you do not have to assume anything about how nested the anchor is in the containing tr.
Example
Say I had links with up/down arrows for moving a table row up or down in order. What would be the most straightforward way to move that row up or down one position (using jQuery)?
There doesn't seem to be any direct way to do this using jQuery's built in methods, and after selecting the row with jQuery, I haven't found a way to then move it. Also, in my case, making the rows draggable (which I have done with a plugin previously) isn't an option.
You could also do something pretty simple with the adjustable up/down..
given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
HTML:
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Demo - JsFiddle
$(document).ready(function () {
$(".up,.down").click(function () {
var $element = this;
var row = $($element).parents("tr:first");
if($(this).is('.up')){
row.insertBefore(row.prev());
}
else{
row.insertAfter(row.next());
}
});
});
Try using JSFiddle