如何在有条件的多个表中将类名添加到 tr 和 td？

Question

我希望你们一切都好。

我有多个table ，它们都有“table”类并且没有 ID。

<table class="table">
    <tbody>
        <tr>
            <td>Table 1, Column 1</td>
            <td>Table 1, Column 2</td>
        </tr>
    </tbody>
</table>
<table class="table">
    <tbody>
        <tr>
            <td>Table 2, Column 1</td>
            <td>Table 2, Column 2</td>
            <td>Table 2, Column 3</td>
        </tr>
    </tbody>
</table>
<table class="table">
    <tbody>
        <tr>
            <td>Table 3, Column 1</td>
            <td>Table 3, Column 2</td>
            <td>Table 3, Column 3</td>
            <td>Table 3, Column 4</td>
        </tr>
    </tbody>
</table>

请帮助我在某些条件下将类名添加到表格单元格（ td ）。

• 如果连续 ( tr ) 有 2 个td ，我需要将 Bootstrap 类col col-md-6到所有td 。
• 如果连续 ( tr ) 有 3 个td ，我需要将 Bootstrap 类col col-md-6 col-md-4到所有td 。
• 如果连续 ( tr ) 有 4 个td ，我需要将 Bootstrap 类col col-md-6 col-md-3到所有td 。

另外，如果您不介意帮助将简单的类名row添加到tr 。

出于某种原因，我无法手动执行此操作，甚至无法将table s 更改为div s。

非常感谢您，祝您度过美好的一天/夜晚！

Answer 1

这是一种简单的方法，我们能不能即兴发挥

 function applyStyle(tds, className){ for (var i = 0; i < tds.length; i++) { tds[i].className += (tds[i].className ? " " : "") + className } } var tables = document.getElementsByTagName("table"); for (var i = 0; i < tables.length; i++) { var table = tables[i]; var tds = table.getElementsByTagName("td"); switch(tds.length){ case 2: applyStyle(tds,"col col-md-6"); break; case 3: applyStyle(tds,"col-md-4"); break; case 4: applyStyle(tds,"col-md-3"); break; } }

 <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="matrix"> <tbody> <tr> <td>Table 1, Column 1</td> <td>Table 1, Column 2</td> </tr> </tbody> </table> <table class="table"> <tbody> <tr> <td>Table 2, Column 1</td> <td>Table 2, Column 2</td> <td>Table 2, Column 3</td> </tr> </tbody> </table> <table class="table"> <tbody> <tr> <td>Table 3, Column 1</td> <td>Table 3, Column 2</td> <td>Table 3, Column 3</td> <td>Table 3, Column 4</td> </tr> </tbody> </table>

Answer 2

function setClass(el, className, fn){
  if(el) {
    for (var i of el) {
      if(typeof className === "string")
         i.setAttribute("class", className);
      if(fn) fn(i);
    }
  }
}
var t = document.getElementsByClassName("table");
setClass(t, null, function(i) {
    let tr = i.getElementsByTagName("tr");
    //row > tr
    setClass(tr, "row", function(q) {
        let td = q.getElementsByTagName("td");
        //td > classNames
        if(td.length === 2) 
            setClass(td, "col col-md-6")
        else if(td.length === 3) 
             setClass(td, "col col-md-6 col-md-4")
        else if(td.length === 4) 
             setClass(td, "col col-md-6 col-md-3 ")
    });
})

<table class="table">
    <tbody>
        <tr>
            <td>Table 1, Column 1</td>
            <td>Table 1, Column 2</td>
        </tr>
        <tr>
            <td>Table 1, Column 3</td>
            <td>Table 1, Column 4</td>
        </tr>
    </tbody>
</table>
<table class="table">
    <tbody>
        <tr>
            <td>Table 2, Column 1</td>
            <td>Table 2, Column 2</td>
            <td>Table 2, Column 3</td>
        </tr>
    </tbody>
</table>
<table class="table">
    <tbody>
        <tr>
            <td>Table 3, Column 1</td>
            <td>Table 3, Column 2</td>
            <td>Table 3, Column 3</td>
            <td>Table 3, Column 4</td>
        </tr>
    </tbody>
</table>

Answer 3

你能提到，你的表是从哪里生成的。 我的意思是它是静态表还是动态表。

如果它是静态的，那么我想你知道答案。 在另一种情况下，在从任何数据源渲染表时，您需要先检查长度，在迭代每个表时，您需要使用 jq 选择器检查它们下的 td

$(this.table.td).length()

这是循环下的当前项目。

提及您的更详细的案例，以便我可以准确地提供代码片段。

Answer 4

 $('.table').each(function( index ) {
        var ColumnCount = $(this).find('tr td').length;
        if(ColumnCount == 2){
            $(this).find('tr td').each(function(){

                $(this).addClass('col col-md-6');
            });
        }
        if(ColumnCount == 3){
            $(this).find('tr td').each(function(){

                $(this).addClass('col col-md-6 col-md-4');
            });
        }
        if(ColumnCount == 4){
            $(this).find('tr td').each(function(){

                $(this).addClass('col col-md-6 col-md-3');
            });
        }
    });