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

Question

I hope you're all doing well.

I have multiple table s, all of them have "table" class and without IDs.

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

Please help me with adding class names to table cells ( td ) with some conditions.

• I need to add Bootstrap classes col col-md-6 to all td s if there are 2 td s in a row ( tr ).
• I need to add Bootstrap classes col col-md-6 col-md-4 to all td s if there are 3 td s in a row ( tr ).
• I need to add Bootstrap classes col col-md-6 col-md-3 to all td s if there are 4 td s in a row ( tr ).

Also, if you don't mind helping with adding a simple class name row to tr s.

For some reason, I can't manually do this or even change the table s to div s.

Thank you so much and have a wonderful day/night!

Answer 1

Here is one simple way, can we improvised

 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

Can you mention, from where your table is generating. I mean is it a static table or dynamic.

If it is static then I think you know the answer. In another case, while rendering the table from any data source you need to check the length first, and while iterating each table you need to check td under them using jq selector something like

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

where this is the current item under the loop.

Mention a more detailed cases of your, SO that I can precisely provide a code snippet.

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