javascript - 如何使用运行时创建的对象渲染数据表单元格

Question

对于熟悉 JavaScript 的人来说，这将是小菜一碟。我想将 wavesurfer 对象放入数据表的渲染函数中。当我单击数据表中的按钮时，渲染会在运行时创建一个 id="demo"的 div。

datatable的渲染函数

"renderer": function ( api, rowIdx ) {
 ....
 return data ?
 $('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"id":"demo"}).prop('outerHTML') : false;
 }

要用 id="demo"填充容器的音频对象

var wavesurfer = Object.create(WaveSurfer);
wavesurfer.init({
    container: document.querySelector('#demo'),
    waveColor: 'violet',
    progressColor: 'purple'
 });

wavesurfer.load('//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg');

当页面加载时我得到这个错误:

Uncaught Error: Container element not found

发生这种情况是因为我还没有点击创建 div 的按钮。

我希望能够使用不同的文件 (.load) 为每一行呈现对象？ 你能帮我解决这个问题吗

Answer 1

我建议您使用一个 .wawe 类而不是多个 id，并将文件 url 设置为元素本身，ex {"class":"wawe", url:"//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"} :

return data 
  ?  $('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"class":"wawe", url:"//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"}).prop('outerHTML') 
  : false;

当点击一行触发子行时，它会立即获得类 .parent。因此，您可以在 .parent 上创建点击处理程序，找到 .child 行(总是下一行).wawe 元素并使用 url 初始化 WaveSurfer 时的属性:

table.on('click', 'tr.parent', function() {
   var wavesurfer = Object.create(WaveSurfer),
       container = $(this).next('tr').find('.wawe')[0];
    wavesurfer.init({
      container: container,
      waveColor: 'violet',
      progressColor: 'purple'
   });
  wavesurfer.load(container.getAttribute('url'));
});       

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

希望这能解决问题。我以前不知道 WaveSurfer，谢谢你:)