Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.
You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();
Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.
If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.
Related
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.
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.
I have a table on my site that contains the options for different products. I didn't put it there, the ecommerce platform did. It lists the options in a row in the table. The table looks like this:
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
<td> </td>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
Then if there were another option it would be in an additional row with the same markup.
This renders with the label (size in this case) out in front of the <select> box. I want the label above the <select> box and I figured the easiest way to accomplish this would be to close the <tr> and open a new one. Any ideas on how to do this?
EDIT: I should mention that the ecommerce platform generates the html and I do not have access to the source code
Assuming that it follows that exact structure, try this:
$(".attributes select").each(function(){
$label = $(this).parent().prev().prev();
$label.parent().before("<tr></tr>");
$label.parent().prev().append($label.clone());
$label.remove();
$(this).parent().prev().remove();
});
Here's an example: Demo
Like so?
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
</tr>
<tr>
<td><select><option>Sizes here</option></select></td>
</tr>
</tbody>
</table>
</div>
I think you have to do it in two steps:
remove the elements:
$('.attributes').find('tr:first-child').remove();
$('.attributes').find('tr:first-child').remove();
2.append them back in the same place
$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');
This table is in the loop. That is number of rows is dynamic.
<tr id="data">
<td><input name="cb" type="checkbox" value="val"></td>
<td>var 1</td>
<td>var 2</td>
<td>var 3</td>
</tr>
One edit button:
<input type="submit" value="edit" id="edit">
Each row has a checkbox. On click of the checkbox the entire row should be in the edit mode. I tried a lot of ways but still far away from the result. The second issue I faced is the id issue. Because the rows are dynamic so...
Probably what you are looking for is this, it uses a thing called "contentEditable" property, which enables editing HTML documents:
http://valums.com/edit-in-place/
More info can be found here: http://msdn.microsoft.com/en-us/library/ms537837%28v=vs.85%29.aspx
You say
This table is in the loop...
but you also have
<tr id="data">
id values must be unique within the document, so you'll have to modify that to not use ids.
But you don't need an id on each row. You can do this:
$('selector_for_the_table tr input[type=checkbox]').change(function() {
var row = $(this).closest('tr');
if (this.checked) {
// make the row editable
}
else {
// make the row uneditable
}
});
Live example
$("input[name=checkbox_name").bind('onchange',function(){
$(this).parent('tr').html();//This line fetch current tr to edit
});
I have a table and I am highlighting alternate columns in the table using jquery
$("table.Table22 tr td:nth-child(even)").css("background","blue");
However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?
Qualify it with the > descendant selector:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.
Edit: woops. Thanks Annan.
Edit 2: stressed tbody.
Untested but perhaps: http://docs.jquery.com/Traversing/not#expr
$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");
Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.
var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);
I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the complete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.
The same could be adapted in your case; replace the checkbox selection with columns instead.
Why not to use the advantages of html ?
Instead of
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Try
<table>
<tfoot>
<tr>
<td>
...
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
You can use the <thead> tag too to manipulate headers.
And now you can call the selector on
$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")
Did you test the following?
$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")
This page defines a nice function for selecting a column
http://programanddesign.com/js/jquery-select-table-column-or-row/