如何从所有其他代码中删除代码属性？

时间：2017-01-11 07:49:46

标签： javascript jquery html contenteditable

双击特定'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); 
});

4 个答案:

答案 0 :(得分：3)

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

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

答案 1 :(得分：3)

试试这个！

＆＃13;
＆＃13; 
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');

});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

您必须从>

中删除$("#contentsTable > td").prop('contenteditable', false)

注意：我添加了css颜色以更好地显示

＆＃13;
＆＃13; 
$(document).on('dblclick', 'td', function(){
    $("#contentsTable td").prop('contenteditable', false).css("color", "black");
    $(this).prop('contenteditable', true).css("color", "red"); 
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

尝试不选择

$("#contentsTable > td:not(this)").prop('contenteditable', false);
相关问题
最新问题