我遇到了一个大问题,到现在为止我找不到任何解决方案,也许你可以帮助我。我有一张看起来像这样的表:
__________________________________
| | 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
你认为有办法吗?希望我能够清楚地了解我想做什么。
答案 0 :(得分:0)
您需要使用jQuery来选择表行。选择行后,您可以遍历它们来访问内部表数据信息。获得该信息后,您可以使用ajax将其发送到某处或使用console.log。
答案 1 :(得分:0)
确切的实现取决于表结构,但假设最基本的结构,应该这样做:
$(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;
答案 2 :(得分:0)
这是一种主要使用jQuery和一些原生javascript的方法:
$(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;