Put contenteditable to all TD except the last ones

Question

Put contenteditable to all TD except the last ones

Navigation

#1 by (2 votes)

3

I have a table of 5 columns, with information, the last column is of actions (Edit, delete, etc). I'm trying to click on an edit icon to enable text editing of all the TDs in the same row except for the last one, since it is a cell of tools, however I do not get it. I have tried

 !$(this).is('td:last');
 $(this).not('td:last');
 !$(this).is(':last');
 $(this).not(':last');

I have not got it, what could be going wrong? This is the code.

$(document).on('click','.tool',function(){
  var action     = $(this).data('action'),
      row        = $(this).parents('tr'),
      row_cloned = $(this).clone(),
      id         = parseInt(row.data('id'));
  switch ( action ) {
    case 'edit':
      row.find('td').each(function(){
        if( !$(this).is('td:last') ){
            $(this).prop('contenteditable',true);
        }
      });
      row.find('td:first').focus();
    break;
});

javascript jquery html5

asked by Alberto Siurob 25.09.2018 в 19:02

source

1 answer

Send data to jInternalFrame with a button from another JinternalFrame, without losing its visibility. JAVA PHP is not displayed when generating PDF

score 2 · Accepted Answer

You were very close to what you want. You just have to change your selector to $(this).is(':last-child') like this:

$(document).on('click','.tool',function(){
  var action     = $(this).data('action'),
      row        = $(this).parents('tr'),
      row_cloned = $(this).clone(),
      id         = parseInt(row.data('id'));
  switch ( action ) {
    case 'edit':
      row.find('td').each(function(){
        if( !$(this).is(':last-child') ){
            $(this).prop('contenteditable',true);
        }
      });
      row.find('td:first').focus();
    break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>Test 1</td>
<td>Test 1</td>
<td>Test 1</td>
<td>Test 1</td>
<td><button data-action="edit" class="tool">Editar</button></td>
</tr>
<tr>
<td>Test 2</td>
<td>Test 2</td>
<td>Test 2</td>
<td>Test 2</td>
<td><button data-action="edit" class="tool">Editar</button></td>
</tr>
</table>