0

I have a html table(grid) which displays a few records for me.I want it to be editable, i.e user can edit the values and save them on pressing enter. My table is something like this.I display records dynamically using php.

 <a class="grayBucketBtn noMargin none" id="unpublish" href="#.">Unpublish</a>
 <a class="grayBucketBtn" id="publish" href="#.">Publish</a>
 <a class="grayBucketBtn" id="delete" href="#.">Delete</a>
 <a class="grayBucketBtn" id="modify" href="#.">Modify</a>
<?php while ()//loop through ?>
<tr>  
    <td class="tableRadioBtn"><input type="checkbox" class="checkRowBody" id="checkRowBody" name="check"/></td>
    <td class="tableShape">Round</td>
    <td class="tableCarst">0.30</td>
    <td class="tableColor">j</td>
    <td class="tableClarity">SI1</td>
    <td class="tableDimension">4.35x4.33x2.62mm</td>
    <td class="tableDeptd">60.3%</td>
    <td class="tableTablePer">60.3%</td>
    <td class="tablePolish">Excellent</td>
    <td class="tableSymmetry">Excellent</td>
    <td class="tableCut">Very Good</td>
</tr>
<?php } ?>

Each row(tr) has a check box associated.If I check the check box,I get a edit button.When I click on the edit button,the selected row will turn into editable.
So I want a function on the edit button,

 $("#modify").click(function(){
      //check if only one check box is selected.
      //make it editable.
      //save the content on pressing enter of the edited row.
    });

I went through some questions but did not get a solution as most suggest some plugins which don't meet my requirements.So,some help would be useful.
Thanks for the time

Improve this question

3 Answers 3

Reset to default
1

This should cover turning them from text to inputs and back to text 

     $('#modify').click(function(){
  $.each($(".checkRowBody:checked"),function(){
   $.each($(this).parent('td').parent('tr').children('td:not(.tableRadioBtn)'),function() {
     $(this).html('<input type="text" value="'+$(this).text()+'">');
   });
  });
});​​​​​​​​​
    $('input[type="text"]').live('keyup',function(event) {
        if(event.keyCode == '13') { 
            // do $.post() here
        $.each($('input[type="text"]'),function(){
            $(this).parent('td').html($(this).val());
        });
        }
    });

​ ​

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for the prompt reply,but the check box is in a loop,so all have the same ID.I have buttons to perform the operations for example Modify,Delete etc.I want to select a row(using checkbox) and then perform operation on the selected row. Can you guide me to achive this? EDITED the QUESTION for the same
you shouldn't use duplicate IDs, consider using an incrementing variable to make them unique and use the class to check for the click trigger.
actually I am working with a single record at a time.Only I am allowing multiple deletes to the user.So I have not changed the ID.Can't it be done using my current scenario.I see gmail does the same.If we select a box for a mail it gives options for delete etc.And even if we select multiple we can delete tham.
Thank you @David Michael Harrison for the help
1
  1. When using checkboxes the user assumes more than one can be selected, if you want only one each time then just use radio buttons

  2. I can't give you a complete solution but I can give you a direction:

    First change the markup like this:

    <tr>  
<td class="tableRadioBtn"><input type="checkbox" class="checkRowBody" id="checkRowBody" name="check"/></td>
<td class="tableShape">Round<input class="hidden" value="Round" name="shape"/></td>
<td class="tableCarst">0.30 <input class="hidden" value="0.30" name="tableCarst"/></td>
...
//Do the same for all the columns
</tr>

    Define the hidden class to display:none so all the inputs are hidden.

    Once the user clicks a row, you remove the text of all the td elements and remove the hidden class from all the inputs:

    $(".tableRadioBtn").click(function(){          
  //find the parent tr, then find all td's under it, empty the text and remove hidden class
  $(this).closest('tr').addClass('editable').find('td').each(function(){
      $(this).text('').removeClass('hidden');
  });         
});

//set a keypress event to detect enter
$(document).keypress(function(){   
  //if enter was pressed , hide input  and set text
  if(e.which == 13) {
      var $editable = $('.editable');
      $editable.find('input').addClass('hidden');
      $editable.find('td').each(function(){
          //set the text back
          $(this).text($(this).find('input').val());
      }); 

      //post data via ajax.
  }
}

Please note that i haven't tested this code so there might be some mistakes there, but this is a possible solution.

UPDATE:

In order to detect if more than one checkbox is checked use this:

if ($(':checked').length > 1){//do something}
Improve this answer

7 Comments

yes keeping that in mind I have changed my buttons,like if a user selects more than one row,I hide all the buttons except delete.(similar to GMAIL).So,he can delete multiple rows but not edit all.Can you now update the answer to my scenario?Not exact solution,but a roadmap like this one.Thanks
Updated my answer on how to see if only one is checked
But how can I get which one is checked in the grid,so that I change only that particular row?Sorry if it sounds stupid,but new to jquery! :P
You don't need to, if you look at the code sample i posted, i put the click event on the radioButton class so by using the this word you can get the exact line that was clicked.
but my scenario is If I check the check box,I get a edit button. When I click on the edit button,then the selected row will turn into editable. I cannot write the click on the checkbox itself directly.i have to do it on the EDIT button or DELETE button etc.
|
0

So you want to make your selections and then invoke an action on the checked rows?

$('#delete').click(function() {
  $.each($('.checkRowBody:checked').parent('td').parent('tr'),function() {
    // probably want to carry out a $.post() here to delete each row using an identifier for the rows related record. 
   //I suggest applying an id or other attribute to the tr element and using that to pass a value with your $.post() data.
    $(this).hide();
  });
});
Improve this answer

5 Comments

yes similar for edit.how can I get the selected box for processing?i.e. which row to edit or delete?
like I said in the comments, apply an id="uniqueid" or attr rowid="uniqueid" to the tr element that can be retrieved from your .each() function
.checkRowBody:checked should give me the currently selected row,right? So,if I want to edit it,I can use your previous answers logic wrapped in my edit buttons click method.Like this:<br/>$("#modify").click(function(){ if($(this).is(':checked')) { $.each($('td:not(.tableRadioBtn,.tableCert)'),function() { $(this).html('<input type="text" value="'+$(this).text()+'">'); }); } else { $.each($('td:not(.tableRadioBtn)'),function() { $(this).text($(this).children('input').val()); }); } }); I believe this should work!! :P correct if i am wrong
Instead of $(this) I can use $(':checkbox:checked') if I understand jquery right! :P
Sort of, on clicking #modify we'll have to iterate over each :checked checkbox input and perform the swapping of text into an input value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.