如何合并所有 <td> 与班
[英]How to merge all <td> with class
问题描述
How to merge all <td> with class in Javascript/CSS. 
如何在Javascript / CSS中将所有<td>与类合并。 I don't want to put the class on <tr> . 我不想将课程放在<tr> 。 The class is on specific <td> . 该类位于特定的<td> 。
<table class="mytables">
<thead>
<tr>
<th> Header col 1 </th>
<th> Header col 2 </th>
<th> Header col 3 </th>
</tr>
<thead>
<tbody>
<tr>
<td class="col_span"> A </th>
<td class="col_span"> </th>
<td> B </th>
</tr>
<tr>
<td> C </th>
<td> D </th>
<td> E </th>
</tr>
<tr>
<td> F </th>
<td> G </th>
<td> H </th>
</tr>
</tbody>
</table>
The result will be like this. 结果将是这样。
I know about colspan, and it is not what I need. 我知道colspan，这不是我所需要的。
3 个解决方案
解决方案1
1 已采纳 2015-10-08 04:44:02
As per my understanding you want to merge td with col_span class . 根据我的理解，您想将td与col_span class合并。
$(function(){ $("tr").each(function(){ var empty = $(".col_span:empty",$(this)).length; $notEmpty = $(this).find(".col_span").not(":empty"); $notEmpty.attr("colspan",empty+1); $(".col_span:empty",$(this)).remove(); }); });
<table class="mytables"> <thead> <tr> <th> header col 1 </th> <th> header col 2 </th> <th> header col 3 </th> </tr> <thead> <tbody> <tr> <td class="col_span"> A </td> <td class="col_span"></td> <td> B </th> </tr> <tr> <td> C </th> <td> D </th> <td> E </th> </tr> <tr> <td> F </th> <td> G </th> <td> H </th> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解决方案2
0 2015-10-08 04:05:45
If you want to apply a style to all <td> elements, you could add this code to the <head> : 如果要对所有<td>元素应用样式，则可以将此代码添加到<head> ：
<style type="text/css">
td{
/* CSS Properties Here */
}
</style>
解决方案3
0 2015-10-08 04:18:32
With a pure js it will look like: 使用纯js，它将看起来像：
var tds = document.querySelectorAll('td');
for(var i = 0; i< tds.length; i++)
{
tds[i].className += 'yourClassName';
}
With jQuery: 使用jQuery：
$('td').addClass('yourClassName');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.