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

达里尔·马利比兰

我希望你们一切都好。

我有多个tables，它们都有“表”类并且没有 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在某些条件下将类名添加到表格单元格 ( )。

如果连续 ( )有 2个col col-md-6，我需要将 Bootstrap 类添加到所有tds 。tdtr
如果连续有 3个 ( )，我需要将 Bootstrap 类添加col col-md-6 col-md-4到所有tds 。tdtr
如果连续有 4个 ( )，我需要向col col-md-6 col-md-3所有tds添加 Bootstrap 类。tdtr

另外，如果您不介意帮助row向trs添加一个简单的类名。

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

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

JS_INF

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。