如何將div添加到數據表

我想知道是否可以將畫布添加到數據表。如何將div添加到數據表

我已經安裝了datatable響應式插件，在列寬過大的情況下，點擊一個按鈕可以讓您看到額外的信息。

我想知道我是否可以將畫布添加到隱藏區域以播放與所選行相對應的音頻。我希望用所謂wavesurfer.js

一個不錯的音頻播放器能夠做到做到這一點，我需要了解以下內容：

如何在隱藏區域的末尾添加一個畫布
如何迫使響應表不顯示的情況下，該表有足夠的空間畫布
畫布具有填補藏度100％的什麼我想要的政績

圖片VE（每行是音頻文件）

enter image description here 請參閱您的信息

<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>

https://jsfiddle.net/h26cxgc8/

來源

2015-06-30 QGA

設置顯示創建畫布：無帆布造型和u可以節省帆布數據到數據庫使用canvas.toDataURL（），它返回一個base64字符串，其中cn被存儲到數據庫:) – AkshayJ

每行是存儲在目錄中的音頻。該畫布由waveurfer.js創建。我們用另一種方式來說吧。如何在使用JavaScript的地方添加一個div？ – QGA

你的意思是每一行代表一個音頻？......這裏使用的畫布是什麼？你可以通過設置其innerHTML並將其附加到DOM來輕鬆添加div :) – AkshayJ

使用在child rows example provided in comments格式（）方法如下。您可以修改的格式返回一個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'); 
    } 
});

下面是一個演示http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/

來源

2015-06-30 10:45:08 Dhiraj

是的，這絕對是我想要的，我正在閱讀教程，但對於我的具體表格，當我添加了「{ 」className「：'details-control'，」orderable「：false，」data「：null，」defaultContent「：'' }'，這將觸發控制檯錯誤'未捕獲的類型錯誤：無法讀取未定義的屬性'樣式' – QGA

您是否可以在http://jsfiddle.net？ – Dhiraj

中重現錯誤，因爲Datatable中的「」列「選項，您會看到該錯誤。演示表格列是不同的，你應該根據你的表格結構定義列選項。 – Dhiraj

如何將div添加到數據表

回答

相關問題