テーブルからブロブへのテキストの結合

Question

私のコードでは、より見やすく見えるようにテーブルに分離しているデータがあります。これは正常に動作しており、それはかなり素晴らしいです。

しかし、私はバックエンドを変更することができないので、私はその見苦しいブロブとしてそれを保存することができますので、データを一緒に戻す問題があります。

私は単純な連結を試みましたが、一緒に束ねる必要があるときにクラスを別々の行に印刷しています。何か案は？

<table class="table" id="DataTables_Table_5"> 
    <thead style="display:none;"> 
    <tr role="row"> 
     <th name="date" scope="col" class="sorting_disabled commentDate" rowspan="1" colspan="1" style="width: 0px;">Invalid date</th> 
     <th name="user" scope="col" class="sorting_disabled commentUser" rowspan="1" colspan="1" style="width: 0px;">UserName</th> 
     <th name="comment" scope="col" class="sorting_disabled commentComment" rowspan="1" colspan="1" style="width: 0px;">Comment</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr role="row" class="odd"> 
     <td class=" commentDate">Fr 01 12, 2017</td> 
     <td class=" commentUser">Demo</td> 
     <td class=" commentComment">skvbgskjhbgswdjefv</td> 
    </tr> 
    <tr role="row" class="even"> 
     <td class=" commentDate">Mo 04 12, 2017</td> 
     <td class=" commentUser">DEMO</td> 
     <td class=" commentComment">This issvgswrgwrgwrgwrg</td> 
    </tr> 
    <tr role="row" class="odd"> 
     <td class=" commentDate">Mo 04 12, 2017</td> 
     <td class=" commentUser">DEMOoooo</td> 
     <td class=" commentComment">Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. </td> 
    </tr> 
    <tr role="row" class="even"> 
     <td class=" commentDate">Mo 04 12, 2017</td> 
     <td class=" commentUser">DEMO DEMO</td> 
     <td class=" commentComment">This is a short comment after the super long comment</td> 
    </tr> 
    </tbody> 
</table> 

、私が試してみましたjsがあなたが各行を読み、そして連結するために、各列の各セルを読む必要がある。この

$(".commentDate").text()+ '\n' + $(".commentUser").text() + '\n\n' + $(".commentComment").text()+ '\n\n' 

https://www.bootply.com/8sDFSzV22Y

Answer 1

のように見えます。

var rows = document.querySelectorAll('#DataTables_Table_5 tr'); 
 
var lines = []; 
 

 
// Read each row 
 
for (var i = 0; i < rows.length; ++i) { 
 
    var r = rows[ i ]; 
 
    // Read each cell 
 
    var cells = [].slice.call(r.querySelectorAll('td, th')) 
 
    .map(function(c) { return c.innerText }); 
 
    // Collect concatenated cells 
 
    lines.push(cells.join(',')); 
 
} 
 

 
console.log(lines.join('\n\n'));

<table class="table" id="DataTables_Table_5"> 
 
    <thead style="display:none;"> 
 
    <tr role="row"> 
 
     <th name="date" scope="col" class="sorting_disabled commentDate" rowspan="1" colspan="1" style="width: 0px;">Invalid date</th> 
 
     <th name="user" scope="col" class="sorting_disabled commentUser" rowspan="1" colspan="1" style="width: 0px;">UserName</th> 
 
     <th name="comment" scope="col" class="sorting_disabled commentComment" rowspan="1" colspan="1" style="width: 0px;">Comment</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr role="row" class="odd"> 
 
     <td class=" commentDate">Fr 01 12, 2017</td> 
 
     <td class=" commentUser">Demo</td> 
 
     <td class=" commentComment">skvbgskjhbgswdjefv</td> 
 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class=" commentDate">Mo 04 12, 2017</td> 
 
     <td class=" commentUser">DEMO</td> 
 
     <td class=" commentComment">This issvgswrgwrgwrgwrg</td> 
 
    </tr> 
 
    <tr role="row" class="odd"> 
 
     <td class=" commentDate">Mo 04 12, 2017</td> 
 
     <td class=" commentUser">DEMOoooo</td> 
 
     <td class=" commentComment">Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. Super long. Super aewsome. </td> 
 
    </tr> 
 
    <tr role="row" class="even"> 
 
     <td class=" commentDate">Mo 04 12, 2017</td> 
 
     <td class=" commentUser">DEMO DEMO</td> 
 
     <td class=" commentComment">This is a short comment after the super long comment</td> 
 
    </tr> 
 
    </tbody> 
 
</table>