CODEWITHSUNDEEP
jquery
Daniel Ellison
Daniel Ellison

Reputation: 1349

Jquery - Editing one row at a time

It seemed simple. I'm trying to get a editbale table using jQuery. I am having issues to only allow one row to be edited at a time. At the moment its free for all, meaning you can edit multiple rows at a time which is not what I need.

I recreated an example here. http://jsfiddle.net/D44Bp/5/

This is the code im having issues with:

$(this).closest('td').siblings().each(        
function(){
    var inp = $(this).find('input');
    if (inp.length){
        $(this).text(inp.val());
    }
    else {
        var t = $(this).text();
        $(this).html($('<input />',{'value' : t}));
    }
});

Does anyone know what I'm missing?

Upvotes: 1

Views: 1371

Answers (2)

Transformer
Transformer

Reputation: 3760

I editted the fiddle you gave in your question. here you can edit per row. and click save button to save and cancel to rollback to initial value.

$('#tbl').find('.save, .cancel').hide();
$('#tbl').on('click', '.edit', function(){
    $('#tbl').find('.save, .cancel').hide();
    $('#tbl').find('.edit').show();
    $('*').prop('contenteditable', false)
    $(this).hide().siblings('.save, .cancel').show();
      currentTD = $(this).closest('td').siblings()
      $.each(currentTD, function () {
      		$(this).attr("initialval", $(this).text())
          $(this).prop('contenteditable', true)
      });
});

$('#tbl').on('click', '.save', function() {
    var $btn = $(this);
    $('#tbl').find('.save, .cancel').hide();
    $btn.hide().siblings('.edit').show();
    currentTD = $(this).closest('td').siblings()
    $.each(currentTD, function () {
        $(this).prop('contenteditable', false)
    });
});

$('#tbl').on('click', '.cancel', function() {
    var $btn = $(this);
    $('#tbl').find('.save, .cancel').hide();
    $btn.hide().siblings('.edit').show();
    currentTD = $(this).closest('td').siblings()
    $.each(currentTD, function () {        
        $(this).text($(this).attr("initialval"));
        $(this).prop('contenteditable', false)
    });
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="tbl" class="table">
  <tr>
    <td class="field1s">field1x</td>
    <td class="field2s">field2x</td>
    <td class="field3s">field3x</td>
    <td class="field4s">field4x</td>
    <td><button type="button" id="edit" class="edit btn btn-success">Edit</button>
    <button type="button" id="edit" style="display:none" class="save btn btn-primary">Save</button>
    <button type="button" id="edit" style="display:none" class="cancel btn btn-danger">Cancel</button></td>
  </tr>

    <tr>
    <td class="field1s">field1x</td>
    <td class="field2s">field2x</td>
    <td class="field3s">field3x</td>
    <td class="field4s">field4x</td>
    <td><button type="button" id="edit" class="edit btn btn-success">Edit</button>
    <button type="button" id="edit" style="display:none" class="save btn btn-primary">Save</button>
    <button type="button" id="edit" style="display:none" class="cancel btn btn-danger">Cancel</button></td>
  </tr>
  
    <tr>
    <td class="field1s">field1x</td>
    <td class="field2s">field2x</td>
    <td class="field3s">field3x</td>
    <td class="field4s">field4x</td>
    <td>
    <button type="button" id="edit" class="edit btn btn-success">Edit</button>
    <button type="button" id="edit" style="display:none" class="save btn btn-primary" >Save</button>
    <button type="button" id="edit" style="display:none" class="cancel btn btn-danger" >Cancel</button>
    </td>
  </tr>  
</table>

Upvotes: 2

Brady Cartmell
Brady Cartmell

Reputation: 607

The simplest solution to this would be do add:

    $('#tbl').find('cancel').click();

inside of your $('#tbl').on('click', '.edit', function(){...}) handler. This will find any cancel buttons currently displayed and click them.

Right now, the behavior of clicking a cancel button seems to be broken, but that is a separate issue.

Upvotes: 1

Related Questions