Home / Questions / 199355
Accepted
Alberto Siurob
Asked: 2020-09-26 09:02:34 +0800 CST 2020-09-26 09:02:34 +0800 CST

Put contenteditable on all TDs except the last ones

  • 772

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

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

I have not succeeded, 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

1 Answers

  1. Best Answer

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

    $(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>

    • 2