Develop Reference

HTML editable Table -> get edited Fields

I have a HTML-Table
<table style="width:100%">
<tr>
<th>id</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>2</td>
<td contenteditable="true">Smith</td>
<td contenteditable="true">50</td>
</tr>
<tr>
<td>3</td>
<td contenteditable="true">Jackson</td>
<td contenteditable="true">94</td>
</tr>
</table>
(Just a TEST-Table)
It is editable, but how do I get all the rows (with ID) which were edited, to send them to a PHP-Backend which saves the changes to DB?
Thanks in advance,
Patrick.

You can save ids in an Array whenever field content is changed.
Here is the Working Example: https://jsfiddle.net/79egs9tc/
var idArr = [];
$(".edited").focusout(function() {
var id = $(this).parent().attr('id');
if($.inArray(id, idArr) === -1){
idArr.push(id);
}
console.log(idArr);
});
You can add check for content is changes or not.
Hope, it will work for you.

find child table selector from parent table - jQuery

I have a table structure like this. Fairly simple one.
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
At runtime I am binding a new row to this table for a particular rowclick. This new row contains a new table.
Now on clicking the row again, I want to be able to remove the newly added row(the new table).
I am using bootstrap table.
Here is what I have tried so far.
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//if ($element.has('#newlyAddedTable').length) { ....// did not work
if ($('#myTable').has('#newlyAddedTable').length) { // this removes the table on any row click. Not what I intend to do
{
$("#newlyAddedTable").remove();
} else {
// some operation...
}
}
I want to be able to remove the newly added table on the row it was created.
Just more explanation based on the Answers below:
<tr> ----------> if i click this
<td>
<table id="newlyAddedTable"> ---------> this is added
</table>
</td>
</tr>
<tr> ----------> if i again click this or maybe any other row in the table
<td>
<table id="newlyAddedTable"> ---------> this is removed
</table>
</td>
</tr>

Update: from OP's comment below it sounds like the best way to implement the new table is to use a class selector and not an id selector. The code below has been updated accordingly. ***Where previously there was an id for newTable there is a class ---> #newTable ===> .newTable:
Just change:
$('#myTable').has('#newlyAddedTable').length
To:
$('.newlyAddedTable', $element).length //element === clicked row -- see demo
vvvvv DEMO vvvvv
$('#myTable').bootstrapTable().on('click-row.bs.table', function(e, row, $element) {
if( $('.newTable', $element).length ) {
$('.newTable', $element).remove();
} else {
$('td:first', $element)
.append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css" rel="stylesheet"/>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>

Try replacing your remove code with this:
$(document).on("click", "#newlyAddedTable", function(){
$(this).remove();
});
The code above registers a click listener on the document. The second parameter filters those events for those with the target #newlyAddedTable. This way you don't have to register a new click handler every time you insert a row (as in #VimalanJayaGanesh's solution).
P.S. If you are adding HTML that looks like this:
<tr>
<td>
<table id="newlyAddedTable">
</table>
</td>
</tr>
Then you are probably actually wanting to remove the parent tr (not the table with the id). There are two ways to fix this.
You can change the selector that filters click events and so have the tr handle the click rather than the table element in my example code:
$(document).on("click", "tr:has(#newlyAddedTable)", function(){
You can leave the selector as is but grab the parent tr from the table and remove that changing the remove line above to:
$(this).parents("tr").first().remove()
or
$(this).parent().parent().remove()

As I don't have your complete code / fiddler, here is a possible solution.
Are you looking for something like this?
$('#add').on('click', function()
{
var newRow = '<tr CLASS="newrow"><td colspan="3"><table><tr><td>Test</td><td>User</td><td>test#example.com</td></table></td></tr>'
$('#myTableBody').append(newRow);
Remove()
});
function Remove()
{
$('.newrow').off('click').on('click', function()
{
$(this).remove();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTableBody">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<button type='button' id='add'>Add</button>
Note:
The following line indicates that,
$('.newrow').off('click').on('click', function()
the click event will be binded to the new row only once.
The reason for adding 'off('click') is, when you are dynamically adding rows (with common class 'newrow') to the table, the events will be binded several times. To avoid that, remove the previously binded click event and add a new one.

jQuery manipulating table rows from ajax response

I have a select dropdown and I can display/remove the condition outputs from my script except for one. What I'm having trouble is removing/deleting the rows created by the $.each. I'm still new with js and I've searched for solutions online but I still couldn't get it to work. Here's my code so far.
<table id="view_programs" class="table table-striped table-bordered">
<thead>
<tr>
<th>Year</th>
<th width="12%">Action</th>
</tr>
</thead>
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
</table>
script
if(selectedValue == '') {
$("#delbutton").hide();
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No program selected.")
).appendTo('#view_programs');
}
else {
$.ajax({
url: '<?php echo site_url("query.php");?>',
type: 'post',
data: {option: selectedValue},
dataType: 'json',
success: function(response) {
$("#delbutton").show().attr("href", "delete/program/"+encodeURIComponent(selectedValue));
if(jQuery.isEmptyObject(response)) {
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No records found.")
).appendTo('#view_programs');
}
else {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += "<tr><td>"+value+"</td><td>"+value+"</td></tr>";
});
$('#view_programs').append(trHTML);
}
console.log(response);
}
});
}
Update:
Achieved what I wanted thanks to Mr. Simon for shedding me some light. I doubt that my code could be better so I'm open to any suggestions.
changed this
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
into this
<tbody class="toBeRemoved">
<tr>
<td colspan="2">No program selected.</td>
</tr>
</tbody>
and this
$('#view_programs').append(trHTML);
into this
$('.toBeRemoved').append(trHTML);
and turned all the #toBeRemoved into .toBeRemoved

you append your table rows to the end of #view_programs, which means after the </tbody> element... so they don't have a #toBeRemoved id which you want to remove i guess?
If you want to remove multiple rows, make sure to use a class (i.e. .toBeRemoved) instead of an id. Ids are unique identifiers for one element only.

Check checkBox when data is entered in textbox inside a table

I was wondering if it is possible to 'Checked=true' the checkBox of the ROW when data is entered in textbox inside a table.
here is the code jquery code to do this, but is checking all the checkboxes. I will appreciate any help.
jquery code:
<script>
jQuery('[id$="enteredValue"]').change(function() {
jQuery('[id$="check"]').attr('checked', true);
});
</script>
html code
<table id="table-2">
<thead>
<tr>
<th>Select</th>
<th>Enter Qty</th>
<th> Suggested Units</th>
<th> Cost</th>
<th>Brand</th>
</tr>
<thead>
<tbody>
<tr>
<td><apex:inputCheckbox id="check" value="{!objectRow.selected}"/> </td>
<td><apex:inputText id="enteredValue" value=" {!objectRow.EnteredValue}" /></td>
<td><apex:outputText value="{!objectRow.Reorder_Amount}"/></td>
<td><apex:outputText value="{!objectRow.Reorder_Cost}" /></td>
<td><apex:outputText value="{!objectRow.Brand}" /></td>
</tr>
</tbody>
</table>

Try this..
<script>
jQuery('[id$="enteredValue"]').change(function() {
$(this).closest('tr').find('[id$="check"]').prop('checked', true);
if(this.val()=="")
{
$(this).closest('tr').find('[id$="check"]').prop('checked', false);
}
});
</script>

That's because you are selecting all checkboxes. Only select the one that is in the row of the text input:
$(this).closest('tr').find('[id$="check"]').prop('checked', true);
If you pass a boolean as value, use prop instead. See https://api.jquery.com/attr/ for more info.

Get text's tags under this

I have this code
JavaScript:
var J = jQuery.noConflict();
J('#example tr').click( function() {
//HERE THE CODE I WANT
} );
HTML:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Immat</th>
<th>Marque</th>
<th>Modèle</th>
<th>Contrat</th>
<th>Début Contrat</th>
<th>Fin Contrat</th>
<th>CoûtHT/mois</th>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
<tr class="odd gradeA">
<td>2257YY64</td>
<td>Citroen</td>
<td>C3</td>
<td>Star Lease</td>
<td>27/04/2009</td>
<td>27/04/2010</td>
<td>270,02</td>
</tr>
In a loop i want to get the text ( text() method ) of each td tag under the tr tab that user had clicked.
How can i do this ?

Use .find and .eachh to solve your problem.
J('#example tr').click( function() {
J(this).find("td").each(function() {
alert(J(this).text()); // or whatever else you want to do with the text
});
});

J('#example tr').click( function() {
var text="";
J(this).children("td").each(function(){
text += J(this).text();
});
alert(text);
});
Also noticed in your code the <THEAD> tag is not closed. This code may not work, if you leave that open.