Как удалить атрибут тега из всех других тегов?

Question

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

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

Answer 1

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

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

Answer 2

Постарайся не селектору

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

Answer 3

Вы должны удалить > из $("#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>

Answer 4

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

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>