如何从所有其他标签中删除标签属性？答案

【问题标题】：How to remove tag attribute from all other tags?如何从所有其他标签中删除标签属性？
【发布时间】：2017-01-11 07:49:45
【问题描述】：

双击特定的table td 时，我使用以下代码添加'contenteditable', true。当我单击特定的td 时，我想为所有其他table td s 使用'contenteditable', false。我按照$("#contentsTable > td").prop('contenteditable', false); 的方式尝试了它，但它不起作用。我该怎么做？

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

【问题讨论】：

改用$("#contentsTable td").prop('contenteditable', false);。 > td 表示 td 类型的直接 DOM 元素。但是这里会先有tr，然后在里面有td。
哦，明白了。有用。谢谢。
那是 gr8 @isuru...！

标签： javascript jquery html contenteditable

【解决方案1】：

td 不是table 元素的直接子元素，因此在将> 与选择器一起使用时不会选择任何内容。所以从选择器字符串中删除direct child(>) selector 使其工作。

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

【讨论】：

【解决方案2】：

试试这个！

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】：

您必须从 $("#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>

【讨论】：

【解决方案4】：

尽量不要选择器

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

【讨论】：