I am trying to make a button that when clicked, it will remove the row from the table. The problem is that I cannot use 'this' to pass an instance of itself into the function because it is wrapped in a 'a href' hyperlink.
<tr>
<td>
<a href="#"
onclick="return removeContact(\''.$row['ContactMail'].'\', this);">
</td>
</tr>
Any ideas on how to get this working?
Use this.parentNode to get the TD or this.parentNode.parentNode to get the row.
Or you can put some Id into TR tag and call it using the jQuery wrap like this:
$("#TrNNN").remove()
A nice way to do this is with JQuery:
$('a').click(function() {
this.parentNode.parentNode.remove()
});
Related
I have a calendar where the day cells are clickable "td" elements. Inside each is an "a" that has a title. I need to use this title in a JavaScript function that is called when any of the "td" elements are clicked. I had to disable the PostBack for all "a" elements
Here is code for one of the cells:
<td align="center" style="width:14%;">15</td>
I just need to access the 15 text technically. I can get the month elsewhere.
Is this possible using JavaScript?
Using jQuery for this would be a pretty good idea since you can select elements pretty conveniently. With jQuery you'd use:
$('td a').attr('title');
If you still want to use pure Javascript, you can select the title of the element by using:
document.querySelectorAll('td a')[0].title;
In the end, they both get the job done but the jQuery code is shorter.
So you'd do something similar to this with jQuery.
$('td a').on('click', function() {
console.log($(this).attr('title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>
<tb>
<tr>
<td>
Hey
</td>
</tr>
<tr>
<td>
Oh
</td>
</tr>
<tr>
<td>
Goodbye
</td>
</tr>
</tb>
</th>
</table>
It's not exactly clear to me what you're after, but if you can control the call, then including this in the call gives you a reference to the element that called the listener, e.g.
<a href="javascript:__doPostBack('ctl00$MainContent$Calendar2','6314', this)"...>
Then in the listener, you have a reference to the element and you can get its title property directly, e.g.
function __doPostBack(arg0, arg1, element) {
var title = element.title;
// title is the value of the element's title property
}
I had to disable the PostBack for all "a" elements
I don't understand what that means. If it means you don't want to use __doPostBack to get the title and want to add a listener to each of the links, then you can do that quite simply too:
window.onload = function(){
[].forEach.call(document.querySelectorAll('td a'), function(a){
a.addEventListener('click', showTitle, false)
});
};
function showTitle(){
console.log(this.title);
}
<table>
<tr><td><a href="#" title="foo">foo
<tr><td><a href="#" title="bar">bar
<tr><td><a href="#" title="fum">fum
</table>
I have a table containing Employee Names. I would like to add a hidden row after each row that contained contact information for that particular employee. I would like to use JQuery to do a slideDown animation that reveals that information.
If I was using Javascript, I would do something like name the TR element with an ID such as "employee-xx" and the hidden line as "hidden-xx" where xx is the employeeid. I would do an onClick event that called a function(using the employeeid as a parameter) to hide or unhide the line. As I am just starting JQuery, I don't know how to code this elegantly. I would like to tell it "When you click a visible line in the table, slideDown the invisible line below it", but don't know how to do that. If I use the ID of the row, how do I access the ID via JQuery? I know it's probably simple, but I am stuck.
Thank you,
John
http://www.w3schools.com/jquery/jquery_traversing_siblings.asp
var clickhandler = function(e) {
$(e.target).next().show();
}
btw, this has been answered on here before.
Retrieve previous and next rows in a table using jQuery
EDIT: Fixed a derpy mistake with missing class name. Fiddle has been updated.
I think this is what you want? Clicking on a row with a name causes the hidden row underneath to slide down. Click again to retract.
HTML:
<table>
<tr class="show">
<td>Bob Robertson</td>
</tr>
<tr class="hide">
<td>
<div>(555)123-4567</div>
</td>
</tr>
<tr class="show">
<td>Richard Johnson</td>
</tr>
<tr class="hide">
<td>
<div>(000)000-0000</div>
</td>
</tr>
</table>
JS:
$('.hide').toggle().find('div').slideToggle();
$('.show').on('click', function () {
var next = $(this).next();
if (next.css('display') == 'none') {
next.toggle();
next.find('div').slideToggle();
} else {
next.find('div').slideToggle(function () {
next.toggle();
});
}
});
Here's a fiddle.
My Html is bellow.
<tr class="success">
cfgdfgh
<td>1</td>
<td>home1</td>
<td>home1</td>
<td>home1</td>
<td>
<input class="btn btn-mini btn-danger deleteMenu" type="button" value="Delete" name="delete">fgfg</td>
</tr>
My Jquery code is bellow
$(".deleteMenu").click(function(){
$(this).parent().css("color","red");
});
I tried that using above jquery code but no luck.I want to selete first td ?
DEMO
Try:
$(".deleteMenu").click(function () {
$(this).closest('tr').find('td:first').css("color", "red");
});
jsFiddle example
With your selector, .parent(), you're selecting the cell that contains the button. One way to accomplish what you want it to traverse up the DOM to the row (.closest('tr')) and then back down to the first cell (.find('td:first')).
BTW on a side note, in your example, the text cfgdfgh isn't valid where you have it.
1) Start by writing valid HTML
2) Go up the DOM tree until u get to the row element, for that you should use .closest()
3) Find the first child of that row element
4) Apply whatever style changes you want
Fiddle: http://jsfiddle.net/u4A7V/7/
Code:
$(".deleteMenu").click(function () {
$(this).closest("tr") // go up the tree
.find("td:first-child") // find the first child
.css("color", "red"); // change color
});
It's pretty easily done this way:
$(".parentClass").find("td:eq(0)")... /* :eq(0) = first occurance */
Also your HTML Markup is erroneous.
The easiest approach would be to assign a class to the . I don't know if it's possible to assign an id to a (probably possible).
This will get the first td in the row:
$(".deleteMenu").click(function(){
$('.success td').eq(0).css("color","red");
});
Hopefull this helps:
http://jsbin.com/eruric/1/edit
$(".success").find("td:first").css("background-color", "red");
Your HTML is not valid, you lack a '' tag and you have text outside the <td>s, change it to this:
<table>
<tr class="success">
<td>1</td>
<td>home1</td>
<td>home1</td>
<td>home1</td>
<td>
<input class="btn btn-mini btn-danger deleteMenu" type="button" value="Delete" name="delete">fgfg</td>
</tr>
</table>
and then your js to:
$(".deleteMenu").click(function(){
$(this).parent().siblings(':eq(0)').css("color","red");
});
JSFiddle Demo
Here we are:
$(".deleteMenu").click(function(){
$(this).closest('tr').find('td').first().css("color","red");
});
$(".deleteMenu").parent() will choose the parent of that input, which is the TR. Also, don't include code straight in the TR, use TD or TH and put it inside. So after putting it in its own TD, you're looking for
$(".deleteMenu").click(function(){
$(this).parents("tr").find("td").first().css("color","red");
});
You can use :first-child.
I assume myTable is an Id of table
$("#myTable tr td:first-child").css("color","red");
Js Fiddle
Please change your markup as well.
tr elements can only have td no text. You have write text in tr element.
i'm having a problem with my append div.
here is a rough idea of my html
<table>
<tr>
<td>title 1</td>
<td>subject 2</td>
</tr>
<div id='appenddiv'></div>
<tr>
<td>title 2</td>
<td>subject 2</td>
</tr>
</table>
and my jquery script is this:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('#appenddiv').append(htmloutput);
All works fine with the script and it fires when it should etc.. but my problem is, instead of placing the new html inside the div tags, it just adds it to the top of the table?
any idea why?
As moonwave99 said, you can't have a <div> as a direct child of your table element. If you always to add after the first row, you can do:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('table tr:first').after(output);
You can't have a <div> as a direct child of a <table> element, so it's rendered outside of it.
Your html structure is not valid. You shouldn't place a div between tr's. You should place it inside a td if you want it inside your table.
If you want to add another row to your table, you should place a tr instead of your div element, and append it's content, or you should use jQuery .after() or .before() to position your element at a specific position.
you can only append div inside a <td> if you want to have a div in a table otherwise you cannot just add <div> inside <table>
I think no need to assign a variable, you can put html code directly to after() method.
Below is the script:
$('table tr:first').after("<tr><td>title added</td><td>subject added</td></tr>");
Above script will always add new row after the first row.
In this jsFiddle
http://jsfiddle.net/littlesandra88/tZqYX/
would I like that a new <tr> is inserted below the one where "Details" is clicked.
I do
$('.row').append("<tr><td>It worked</td></tr>");
but this results in
<tr class="row">
<td class="edit-column">Details <input value="Save" type="submit"></td>
<tr><td>It worked</td></tr></tr>
where I was hoping for
<tr class="row">
<td class="edit-column">Details <input value="Save" type="submit"></td>
</tr>
<tr><td>It worked</td></tr>
Any idea how to fix this?
Try $('.row').after("<tr><td>It worked</td></tr>");
.append. is appending the row to the .row row. Using .after will put the row AFTER the .row row
Try .after() instead of .append()
$('.row').after("<tr><td>It worked</td></tr>");
You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.
Try .after() instead. .append() is for sticking something INSIDE the specified element at the end of the child list
$(<tr><td>It worked</td></tr>").insertAfter($('.row'));
You need to append the new row to the tbody element, not to the row itself
You are basically trying to add to an existing row. You need to add the new row to the table. Or try something like the next $row after it.
$('#accTable').append("<tr><td>It worked</td></tr>");
The .after() is probably what you're looking for. It will append the text after the row element.