Я использую следующий код для добавления 'contenteditable', true при двойном щелчке на определенном table td. Когда я нажимаю на определенный td, я хочу 'contenteditable', false для всех остальных table td. Я попробовал это следующим образом $("#contentsTable > td").prop('contenteditable', false);, но это не работает. Как мне это сделать?

$(document).on('dblclick', 'td', function(){
    $("#contentsTable > td").prop('contenteditable', false);
    $(this).prop('contenteditable', true); 
});
1
isuru 11 Янв 2017 в 10:49

4 ответа

Лучший ответ

td не является прямым потомком элемента table, поэтому при использовании > с вашим селектором. Поэтому удалите прямой дочерний (>) селектор из строки селектора, чтобы сделать это работает.

$("#contentsTable td").prop('contenteditable', false);
3
Pranav C Balan 11 Янв 2017 в 07:55

Вам придется удалить > из $("#contentsTable > td").prop('contenteditable', false)

Примечание: я добавил цвет CSS, чтобы показать его лучше

$(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>
2
Carsten Løvbo Andersen 11 Янв 2017 в 07:56

Попробуй это!

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>
3
Carsten Løvbo Andersen 25 Янв 2017 в 06:31

Попробуй не селектор

$("#contentsTable > td:not(this)").prop('contenteditable', false);
1
Muhammed Shevil KP 11 Янв 2017 в 07:53