Question

我无法将样式分配给表格中动态创建的列选择表格中的单元格时，行和列都会突出显示但是，如果稍后添加该元素，则无效我使用on()使用委托绑定但没有所需的结果。在互联网上搜索并没有给我一个解决方案。有什么想法吗？

$("td").on("click", function(event) {
  var table = 'table'
  var styleA = {'-webkit-box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
              '-moz-box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
              'box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'};
  var styleB = {'-webkit-box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
              '-moz-box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
              'box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
              'outline':' 3px solid #086aa7'};
  
  $(table).find("td,tr").removeAttr('style'); 
  $(table).find("td").removeAttr('style');
  $(this).parent('tr').css(styleA);
  $('td:eq(' + this.cellIndex + ')','tr').css(styleA);
  $(this).css(styleB);
});

$(document).mouseup(function(e){
    var container = $("table");
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
      $("table").find("tr,td").removeAttr('style');
      $("table").find("td").removeAttr('style');
    }
});

$(window).on("load", function () {
    $( 'table tr th:nth-child(1)').after('<th>');
		$( 'table tr td:nth-child(1)').after('<td></td>');
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
  margin: 50px 0 0 50px;
}

td,th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}
th {
  background-color: #dce0e3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus </td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari </td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 1

您的方法不会受到将来创建的元素的约束。您需要在on()绑定中添加“委托”绑定：source

这样做：

$('table').on('click', $('td'), function() { ... });

其中$('table')是一个静态元素，您可以在其中添加动态节点。

因此，您有一个硬编码到HTML源代码中的表：

<table>
  ...
</table>

然后用动态内容填充它。我们的想法是将事件委托给该表包装器，而不是直接在动态元素上绑定处理程序。

无法将样式分配给表中动态创建的列

1 个答案: