CODEWITHSUNDEEP
javascriptjqueryhtmlcontenteditable
isuru
isuru

Reputation: 3565

How to remove tag attribute from all other tags?

I'm using following code to add 'contenteditable', true when double click on particular table td. When I click on particular td I want to 'contenteditable', false for all other table td s. I tried it on following way $("#contentsTable > td").prop('contenteditable', false); but it not working. How I do this?

$(document).on('dblclick', 'td', function(){
    $("#contentsTable > td").prop('contenteditable', false);
    $(this).prop('contenteditable', true); 
});

Upvotes: 1

Views: 137

Answers (4)

Saw Thu Naing
Saw Thu Naing

Reputation: 81

Try this!

var $cell = $('tr.tableRow td.inner'),
  $body = $('body');
$body.on('click', function(e) {
  if ($cell.children(e.target).length == 0 && $cell.index(e.target) == -1) {
    $cell.attr('contentEditable', 'false')
      .removeClass('inputCopyCat');
  }
});
$cell.on('click', function() {
  $cell.attr('contentEditable', 'false')

  $(this).attr('contentEditable', 'true');
  $(this).addClass('inputCopyCat');

});
.inputCopyCat {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;
  font: -moz-field;
  font: -webkit-small-control;
  margin-top: 5px;
  padding: 2px 3px;
  width: 398px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="table-responsive1">
  <tbody style="width:150%">
    <tr style="background: none repeat scroll 0 0 #4d6684;color:#fff;">
      <td class="columnfirst">Date</td>
      <td class="inner">01</td>
      <td class="inner">02</td>
      <td class="inner">03</td>
      <td class="inner">04</td>
      <td class="inner">05</td>
      <td class="inner">06</td>
      <td class="inner">07</td>
      <td class="inner">08</td>
      <td class="inner">09</td>
      <td class="inner">10</td>
      <td class="inner">11</td>
      <td class="inner">12</td>
      <td class="inner">13</td>
      <td class="inner">14</td>
      <td class="inner">15</td>
      <td class="inner">16</td>
      <td class="inner">17</td>
      <td class="inner">18</td>
      <td class="inner">19</td>
      <td class="inner">20</td>
      <td class="inner">21</td>
      <td class="inner">22</td>
      <td class="inner">23</td>
      <td class="inner">24</td>
      <td class="inner">25</td>
      <td class="inner">26</td>
      <td class="inner">27</td>
      <td class="inner">28</td>
      <td class="inner">29</td>
      <td class="inner">30</td>
      <td class="inner">31</td>
      <td class="inner" style="width:100px;" rowspan="2">Total Hours Worked</td>
    </tr>
    <tr style="background: none repeat scroll 0 0 #4d6684;color:#fff;">
      <td class="columnfirst">Day</td>
      <td class="inner">Mo</td>
      <td class="inner">Tu</td>
      <td class="inner">We</td>
      <td class="inner">Th</td>
      <td class="inner">Fr</td>
      <td class="inner">Sa</td>
      <td class="inner">Su</td>
      <td class="inner">Mo</td>
      <td class="inner">Tu</td>
      <td class="inner">We</td>
      <td class="inner">Th</td>
      <td class="inner">Fr</td>
      <td class="inner">Sa</td>
      <td class="inner">Su</td>
      <td class="inner">Mo</td>
      <td class="inner">Tu</td>
      <td class="inner">We</td>
      <td class="inner">Th</td>
      <td class="inner">Fr</td>
      <td class="inner">Sa</td>
      <td class="inner">Su</td>
      <td class="inner">Mo</td>
      <td class="inner">Tu</td>
      <td class="inner">We</td>
      <td class="inner">Th</td>
      <td class="inner">Fr</td>
      <td class="inner">Sa</td>
      <td class="inner">Su</td>
      <td class="inner">Mo</td>
      <td class="inner">Tu</td>
      <td class="inner">We</td>
    </tr>
    <tr class="tableRow">
      <td class="columnfirst">Recruitment &amp; Selection</td>
      <td class="inner"></td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">0</td>
    </tr>
    <tr class="tableRow">
      <td class="columnfirst">Training &amp; Development</td>
      <td class="inner"></td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner" style="background:none repeat scroll 0 0 #f90;color:#fff;">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">00</td>
      <td class="inner">0</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You will have to remove the >from $("#contentsTable > td").prop('contenteditable', false)

Note: i added css color to show the it better

$(document).on('dblclick', 'td', function(){
    $("#contentsTable td").prop('contenteditable', false).css("color", "black");
    $(this).prop('contenteditable', true).css("color", "red"); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="contentsTable">
  <thead>
    <tr>
      <td>click on the element below</td>
      <td>click on the element below</td>
      <td>click on the element below</td>
      <td>click on the element below</td>
      </tr>
  </thead>
  <tbody class="dblclick">
    <tr>
      <td>click</td>
      <td>click</td>
      <td>click</td>
      <td>click</td>
      </tr>
    </tbody>
  </table>

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115222

The td is not the direct child of table element so nothing get selected when using > with your selector. So remove the direct child(>) selector from the selector string to make it work.

$("#contentsTable td").prop('contenteditable', false);

Upvotes: 3

Muhammed Shevil KP
Muhammed Shevil KP

Reputation: 1396

Try not selector

$("#contentsTable > td:not(this)").prop('contenteditable', false);

Upvotes: 1

Related Questions