We Keep Coding

Make a table cell editable by placing input box over td

I want to make a table cell editable on double click so that I can put some value in cell :
Currently I am placing a input box inside td on dblclick on it :
$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();
$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.
I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.

For similar result you can use contenteditable
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
Fiddle:https://jsfiddle.net/kpkjr7ev/

You can do something like this,using contenteditable attribute that you can avoid input tag
$('td').on({
'dblclick': function() {
$(this).prop('contenteditable', true);
},
'blur': function() {
$(this).prop('contenteditable', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
</tbody>
</table>

https://code.google.com/p/jquery-datatables-editable/
I think you should use this great plugin called JQuery Datatables
https://www.datatables.net/
This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB :
https://code.google.com/p/jquery-datatables-editable/
You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.

If you set contenteditable='true' in this way
this will probably not work in IE.
So I recommend you to add a div in td in this way
and in Js on double click of cell make the cell editable
$(this).find('#editdiv').prop('contenteditable', true)

JavaScript - Get data of first cell of selected table row

<table border="1" cellpadding="5" id="newtable">
<tr>
<th>Room No</th>
<th>AC</th>
<th>Deluxe</th>
<th>Tariff</th>
</tr>
<c:forEach var="room" items="${myrooms}">
<tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">
<td class="nr"><c:out value="${room.roomno}" /></td>
<td><c:out value="${room.ac}" /></td>
<td><c:out value="${room.deluxe}" /></td>
<td>₹<c:out value="${room.price}" /></td>
<td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
</tr>
</c:forEach>
</table>
On clicking the button corresponding to every row, I want my script to return the Room number i.e. the first cell data of the row. I have tried a lot of things after referring various articles on the Internet. Nothing seems to work. Please help.

You can use something like
Demo
$(window).on('click', '.mybutton' ,function() {
alert($(this).parent().parent().find('.nr').text());
//Or you can use, which is even better
//alert($(this).parent().siblings('.nr').text());
});
Here, the selector is pretty simple, we are first binding click event on the button, and onclick we select the button element parent i.e td and we select the parent of td i.e tr and later we find an element with a class of .nr
You can also write td.nr instead of just .nr to be more specific.
Your rows are being dynamically added, in order for your click listener to work you will have to delegate the events
Credits to #Patsy Issa for suggesting .siblings()

$(".mybutton").click(function(){
alert($(this).parent().siblings().eq(0).text());
});

usually im using DataTables js for solution, you can check at: https://datatables.net/reference/api/row().data()

Jquery select first parent of <td> tag in HTML table

I'm using Jquery V1.11.1 in my application. I have a HTML table which looks like this:
<table id="permissions">
<tr>
<td></td>
<th>Administrators</th>
<th>Moderators</th>
</tr>
<tr>
<th class="aco">controllers/users/display</th>
<td class="permission">Allowed</td>
<td class="permission">Denied</td>
</tr>
</table>
When you click on "Allowed" or "Denied" I want to select the TH tag which contains the ACO.
I thought this would do it, but it doesnt. $(this).parent('th').text();
What is the best way to select the TH tag using Jquery in this situation?

Use
$(this).closest('tr').find('th.aco').text();
DEMO
or
$(this).siblings('th.aco').text();
DEMO

Use .siblings() in jquery
$(this).siblings('th.aco').text();

$('.permission').on('click', function(){
$(this).siblings('.aco').text();
})
or if more than one siblings has this class .aco
$('.permission').on('click', function(){
$(this).siblings('th.aco').text();
})
will select the th that is parallel to the clicked td and display it's text. You can perform a different function on selected th instead of .text().

jQuery find highest parent TD

I'm working on a code for a form contained within a table. I'm writing (with jQuery) a function to highlight the parent <td> of each <input> element. That part is simple - the code is just:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
The more complicated part is that some text fields are inside of a second table nested within a <td> of the first table. It would look like:
<table>
<tr>
<td> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
So my question is this: is there a way to use one jQuery statement to find the highest parent <td> of the <input> element? So in other words, can I combine:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
and
$('.myForm input').click(function(){
$(this).parent().parent().addClass('active');
})
into one function?

The best solution is to add a class to the table you actually want to target. This means that you could update the markup in future without necessarily breaking the JS, by doing something like $(this).closest('.targetElement').addClass('active').
If you can't do that, you can use parents('td').last(). This selects all td parent elements and then gets the last one.
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})
See the jQuery manual:
closest
parents
last

Try doing this:
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})

I'd suggest trying:
$(this).parents("td").last()
It will find all table cell ancestors of the current element. The last one should contain the highest level table cell element.

you can try:
$(this).parents('td:last');
or
$(this).parents('td').last();

Give your top-level td element a class name:
<table>
<tr>
<td class="topTD"> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
$('.myForm input').click(function(){
$(this).closest('td.topTD').addClass('active');
});

Quick&dirty :)
$(this).parents('td')[--$(this).parents('td').length]

Highlighting columns in a table with jQuery

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/