テーブルからDIVへの変換

Question

私は大きな問題を抱えていますが、今までは解決策を見つけることができませんでした。

__________________________________ 
|  | time1 | time2 | time3 | 
+--------+-------+-------+-------+ 
| John | ok |  |  | 
+--------+-------+-------+-------+ 
| Peter |  | ok | ok | 
+--------+-------+-------+-------+ 
| Sara | ok |  |ok  | 
+--------+-------+-------+-------+ 

が、私はこのようなもので（メモ帳でコピー/貼り付けを行うために）変換したいと思い、あなたが望むものは何でも、JS、jQueryの、PHP、CSSを使用した：私はこのように見えるテーブルを持っています、HTML5 ...

John time 1: ok 
Peter time2: ok, time3: ok 
Sara time1: ok, time3: ok 

あなたはこれを行う方法があると思いますか？私が何をしたいのか理解するのに十分明確であることを願っています。

Answer 1

正確な実装は、テーブル構造に依存するが、最も基本的なものを想定し、これはそれを行う必要があります。

$(document).ready(function() { 
 
    var $rows = $("#times tbody tr"); 
 
    var times = []; 
 
    var html = ""; 
 
    var list; 
 
    for (var row = 0; row < $rows.length; row++) { 
 
    $cells = $($rows[row]).find("td"); 
 
    list = []; 
 
    for (var col = 0; col < $cells.length; col++) { 
 
     var content = $($cells[col]).html(); 
 
     if (row === 0) times.push(content); 
 
     if (row > 0) { 
 
     if (col === 0) html += content + ": "; 
 
     else if (content.length) list.push(times[col] + ": " + content); 
 
     } 
 
    } 
 
    html += list.join(", ") + "<br>"; 
 
    } 
 
    $("#output").html(html); 
 
});

table { 
 
    border-collapse: collapse 
 
} 
 
td { 
 
    padding: 0.5em; 
 
    border: 1px solid black 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="times"> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td>time1</td> 
 
     <td>time2</td> 
 
     <td>time3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>ok</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Peter</td> 
 
     <td></td> 
 
     <td>ok</td> 
 
     <td>ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sara</td> 
 
     <td>ok</td> 
 
     <td></td> 
 
     <td>ok</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div id="output"></div>

ここ

Answer 2

テーブル行を選択するには、jQueryを使用する必要があります。行を選択すると、内部テーブルのデータ情報にアクセスして行を反復することができます。その情報があれば、ajaxを使ってどこかに送るか、console.logを使うことができます。

Answer 3

はjQueryのほとんどが使用したアプローチとネイティブのダッシュですジャバスクリプト：

$(document).ready(function(){ 
 
    
 
    $('button').click(function(){ 
 

 
     $('tr').each(function(i){ 
 
      var row = []; 
 
      var datacells = $(this).children(); 
 
      row.push($(this).find('td:nth-of-type(1)').text()); 
 

 
      for (k = 2; k <= datacells.length; k++) { 
 
       if ($(this).find('td:nth-of-type(' + k + ')').text() !== '') { 
 
        var element = 'time' + (k - 1) + ': ' + $(this).find('td:nth-of-type(' + k + ')').text(); 
 
        row.push(element); 
 
       } 
 
      } 
 

 
      var paragraphText = ''; 
 
      $(row).each(function(j){paragraphText += row[j] + ' ';}); 
 
      $('body').append('<p>' + paragraphText + '</p>'); 
 
     }); 
 
    }); 
 
});

table, th, td { 
 
border: 1px solid rgb(0,0,0); 
 
border-collapse: collapse; 
 
padding: 6px; 
 
} 
 

 
table, button { 
 
display: inline-block; 
 
vertical-align: top; 
 
margin-right: 24px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
<thead> 
 
<th></th> 
 
<th>time1</th> 
 
<th>time2</th> 
 
<th>time3</th> 
 
</thead> 
 

 
<tr> 
 
<td>John</td> 
 
<td>OK</td> 
 
<td></td> 
 
<td></td> 
 
</tr> 
 

 
<tr> 
 
<td>Peter</td> 
 
<td></td> 
 
<td>OK</td> 
 
<td>OK</td> 
 
</tr> 
 

 
<tr> 
 
<td>Sara</td> 
 
<td>OK</td> 
 
<td></td> 
 
<td>OK</td> 
 
</tr> 
 
</table> 
 

 
<button type="button">Convert Table</button>