convert checked rows to input fields - php

Question

I am showing data from database into table with the checkbox in front of every row. All I want is to change the checked rows columns with class click into input fields on clicking the edit button. I am very new to jQuery. I don't have much concepts about it. So help me please.
Here is the jQuery code I've tried:
$(function () {
$("input[name='check[]']:checked").each(function (){
$('#edit').click(function(){
var OriginalContent = $('.click').text();
$('.click').addClass("cellEditing");
$('.click').html("<input type='text' value='" + OriginalContent + "' />");
$('.click').children().first().focus();
$('.click').children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $('.click').val();
$('.click').parent().text(newContent);
$('.click').parent().removeClass("cellEditing");
}
});
$('.click').children().first().blur(function(){
$('.click').parent().text(OriginalContent);
$('.click').parent().removeClass("cellEditing");
});
});
});
});
And here is the html:
echo '<div class="table-responsive">';
echo '<table class="table table-bordered table-hover"><thead><tr>
<th>ID</th><th>Name</th><th>Category</th><th>Description</th><th>Price</th><th>Status</th><th colspan="2">Image</th></tr></thead><tbody>';
while($row = mysqli_fetch_array($retval))
{
echo '<tr><td>'.$row["ID"].'</td>
<td >'.$row["Name"].'</td>
<td>'.$row["Category"].'</td>
<td>'.$row["Description"].'</td>
<td class="click1">'.$row["Price"].'</td>
<td class="click">'.$row["Status"].'</td>
<td><img style="width: 3em; heigth: 3em;" class="img-responsive" src="'.$row["Imagepath"].'" alt="'.$row["Name"].'"/></td>
<td><input class="checkbox" name="check[]" id="check[]" type="checkbox" value='.$row["ID"].'/></td></tr>';
}
echo '</tbody></table>';
echo '</div>';
?>
<center><input class="btn btn-default" name="deletebutton" type="submit" value="DELETE" />
<input class="btn btn-default" name="edit" id="edit" type="button" value="EDIT" />
<input class="btn btn-default" name="updatebutton" type="submit" value="UPDATE"/></center>
</form>

Answer 1

Basically you need two functions to run...
when "edit" is clicked: convert all "editable" columns to INPUTs, if that row is ":checked"
when ENTER is pressed while editing one of your "editable" INPUTs: revert it to a string
I simplified your HTML a bit for clarity. An explanation of the jQuery needed is inline.
Also, here's a working jsFiddle: http://jsfiddle.net/msz76tgp/2/
HTML
<table>
<tr>
<td class="editable status">something</td>
<td class="editable price">2</td>
<td class="checkbox"><input type="checkbox"/></td>
</tr>
<tr>
<td class="editable status">something else</td>
<td class="editable price">3</td>
<td class="checkbox"><input type="checkbox"/></td>
</tr>
</table>
<a id="edit" href="#edit">edit</a>
jQuery
$(function () {
// When edit is clicked...
$('#edit').on('click', function(){
// For each ":checked" checkbox...
$('.checkbox INPUT:checked').each( function(){
// Get the parent row...
var $row = $(this).closest('tr');
// And that row's "editable" columns...
var $editable= $row.children('.editable');
// Add the "editing" class...
$editable.addClass('editing');
// And change all strings to INPUT fields.
$editable.each( function(){
$(this).html('<input value="'+$(this).text()+'"/>');
});
});
});
// Also...
// Any time an .editing INPUT receives a keypress...
$('table').on('keypress', '.editing', function(e){
// If the key pressed is ENTER...
if( e.which == 13 ){
// Get the current row...
var $row = $(this).closest('tr');
// Get the editable columns...
var $editable = $row.children('.editable');
// Remove the class...
$editable.removeClass('editing');
// Change back to string...
$editable.each( function(){
$(this).html( $(this).find('INPUT').val() );
});
}
});
});

Answer 2

I didnt really use your code, since you're writing html with php which is hard to maintain and isnt my preferred style (id rather write html and then put php inside) but this should get help you with your question: http://jsfiddle.net/swm53ran/28/.
comments in the code show what's going on. in essence, im using jquery to add the input with the data that is already in there. but since you are using php, you can just modify the code below by inserting <?php echo();?> inside the html code built in the javascript section.
<tr>
<td class="name">php echo name here</td>
<td class="description">php echo description here</td>
<td class="data">php echo data here</td>
<td>Edit Info</td>
</tr>
$('.edit').on('click', function() {
var row = $(this).closest('tr');
***NOT NECESSARY SECTION OF CODE BECAUSE YOU'RE USING PHP (JUST FOR DEMO)****
//collect data thats there (you dont have to do this if you have php,
//then you can just code in <?php echo();?> into your html building in
//javascript) because i have no php here
var name = row.find('.name').html();
var description = row.find('.description').html();
var data = row.find('.data').html();
***END OF NOT NECESSARY SECTION****
//construct inputs to be inserted into cells
//since you're using php, you modify the below code to something like this:
//var nameInput = '<input type="text" value="<?php echo('name');?>"/>';
//but you have to be careful because ^ this code wont work because of the
//nested parenthesis escape each other, so just put like <?php echo('name');?>
//into another variable and stick the variable in instead.
var nameInput = '<input type="text" value="'+ name +'"/>';
var descriptionInput = '<input type="text" value="'+ description +'"/>';
var dataInput = '<input type="text" value="'+ data +'"/>';
//remove all contents and append inputs
row.find('.name').html('').append(nameInput);
row.find('.description').html('').append(descriptionInput);
row.find('.data').html('').append(dataInput);
});
hope this helps!