Javascript 如何将div添加到datatable

我想知道是否可以向datatable添加画布

我已经安装了datatable responsive插件，如果列太宽，单击按钮将允许您查看额外信息

我想知道是否可以将画布添加到隐藏区域，以便播放与所选行对应的音频。我希望使用一个很好的音频播放器，名为

要做到这一点，我需要学习以下内容：

• 如何在隐藏区域的末尾添加画布
• 如果表有足够的空间，如何强制响应表不显示画布
• 画布必须100%填充隐藏分区

我正在尝试实现的图片（每一行都是一个音频文件）

请参阅以下内容了解您的信息

<div id="demo">
   <div id="waveform">
      <div class="progress progress-striped active" id="progress-bar" style="display: none;">
         <div class="progress-bar progress-bar-info" style="width: 100%;"></div>
      </div>
      <wave style="display: block; position: relative; -webkit-user-select: none; height: 128px; overflow-x: auto; overflow-y: hidden;"><canvas width="870" height="128" style="position: absolute; z-index: 1; top: 0px; bottom: 0px; width: 870px;"></canvas><wave style="position: absolute; z-index: 2; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right-style: solid; border-right-width: 1px; border-right-color: navy;"><canvas width="870" height="128" style="width: 870px;"></canvas></wave></wave>
   </div>
</div>

使用中的format（）方法。您可以修改格式以返回一个div，您可以使用wavesurfer.js在其中创建画布

function format(d) {
  return '<div class="player"></div>';
}
var table = $('#example').DataTable({
  "columns": [{
    "className": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": '+'
  }, {
    "data": "Name"
  }, {
    "data": "Position"
  }, {
    "data": "ID"
  }]
});
$('#example tbody').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  if (row.child.isShown()) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child(format(row.data())).show();
    tr.addClass('shown');
  }
});

函数格式（d）{
返回“”；
}
变量表=$（'#示例'）。数据表({
“栏目”：[{
“className”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：“+”
}, {
“数据”：“名称”
}, {
“数据”：“位置”
}, {
“数据”：“ID”
}]
});
$（#示例tbody'）。在（'click'，'td.details control'，function（）上{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
});

---

这里是一个演示

设置显示：画布样式中没有，您可以使用canvas.toDataURL（）将画布数据保存到数据库，该函数返回一个base64字符串，该字符串可以存储到DB:）每一行都是存储在目录中的音频。画布由wavesurfer.js创建。让我们换一种说法。如何使用javascript在我放置播放器的地方添加一个div？你是说每一行代表一个音频？…canvas在这里有什么用途？你可以通过设置其innerHTML并将其附加到DOM来轻松添加一个div:）到达那里：）我怎么做，有什么例子吗？刚刚发现：是的，这绝对是我想要的，我正在阅读教程，但在添加

{“className”：“details control'，“orderable”：false，“data”：null，“defaultContent”：“”）时，是为了我的特定表，

这将触发控制台错误

未捕获类型错误：无法读取未定义的属性“style”

由于

数据表中的
“columns”
选项，您会看到该错误。在我的演示中，表列是不同的，您应该根据表结构定义列选项。我遇到的问题是响应插件与格式函数冲突。请参阅此了解您的信息，我有两个+按钮，存在明显的冲突。当表格足够大时，div就会出现，而当响应发生时它就不工作了。谢谢你的帮助。你回答了我的问题，我会问另一个问题