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

您需要使用jQuery来选择表行。选择行后，您可以遍历它们来访问内部表数据信息。获得该信息后，您可以使用ajax将其发送到某处或使用console.log。

Answer 2

确切的实现取决于表结构，但假设最基本的结构，应该这样做：

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是一种主要使用jQuery和一些原生javascript的方法：

＆＃13;

$(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>');
        });
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

表到DIV转换

3 个答案: