jQuery dataTables - 从单元格中删除 HTML 元素

Question

尝试根据不同的 JQuery 事件动态编辑单元格。这就是我希望对数据所做的（以更简单的方式将 fns 放在一起）

var d = table.cell(rowindex,cellindex).node().remove(".custom-class1");
table.cell(rowindex,cellindex).data(d);

单元格的示例数据，

<td>
  <span class="custom-class1"></span>
  <span class="custom-class2"></span>
</td>

单元格数据应替换为，

<td>
  <span class="custom-class2"></span>
</td>

提前致谢！

Answer 1

您是要通过行和列规范删除跨度，还是只是 class。如果只是 class，请尝试：

$('#button').click(function(){
    var className = $('#classHolder').val();
    $('.'+className).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
  <span class="custom-class1">custom-class1</span>
  <span class="custom-class2">custom-class2</span>
</td>
<br><br>
<input type="text" placeholder="Example: custom-class1" id="classHolder" /><button id="button">Remove Class</button>

Answer 2

设置

var d = table.cell(rowindex,cellindex).node().remove(".custom-class1");

永远行不通。 node() returns 一个 DOM 节点，而不是 jQuery 对象（为此使用 to$() 或 toJQuery()），并且 remove(".custom-class1") 会无论如何删除 entire <td>。

要删除特定的 <span>，您应该使用 $('span-selector').remove()。 $somethingContainingSpans.remove('.class') 也删除了 $somethingContainingSpans。

我会将内容检索为 jQuery 实例，对其进行处理并将其放回原处。单击单元格时，以下内容将删除 <span class="custom-class1">class1</span>：

table.on('click', 'td', function() {
   var $data = table.cells(this).nodes().to$();    
   //or just -> var $data = $(table.cell(this).data());  
   $data.find('span').remove(".custom-class1");
   table.cell(this).data($data.html());
});

演示 -> http://jsfiddle.net/ka4v78jd/

注意：使用 cells(this).nodes()（复数方法）因为 to$() 似乎不适用于 cell() 或 node() - 但结果是相同的。

jQuery dataTables - 从单元格中删除 HTML 元素

jQuery dataTables - Remove an HTML element from a cell

jquery

datatables