偶数后添加表格行

时间:2017-04-14 02:59:56

标签: javascript jquery html

我想在偶数

之后在我的表中添加行

我的输入html就像这样

<table id ="my_table">
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </tbody>
</table>

我想要这样的输出

<table id ="my_table">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

我试过这个,但没有正确得到输出。

$("</tr><tr>").insertAfter($("td:odd"));

不确定我在哪里犯了错误。

3 个答案:

答案 0 :(得分:1)

这是一个有效的解决方案。希望它有所帮助!

&#13;
&#13;
 $("table#my_table td").each(function (index) {
        var odd = isOdd((index + 1));
        if (odd) {
            $("table#my_table tbody").append($("<tr>").attr("align", "center"));
        }
        $("table#my_table tr").last().append($(this));
    });
    $("table#my_table tr").first().remove();

    function isOdd(num) {
        return num % 2;
    }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table border = "1" id ="my_table">
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这可以通过循环包裹它们的奇数元素(使用偶数计数器部分)来实现。

&#13;
&#13;
$("td").unwrap();
$("td:nth-child(odd)").each(function () {
  $(this)
    .next()
    .andSelf()
    .wrapAll("<tr>")
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="my_table">
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

我注意到的第一件事是$(“”)以错误的顺序打开和关闭HTML标签。但是,如果没有看到你的其他代码,我就不知道你哪里出错了。

这是一个可以满足您需求的小提琴:https://jsfiddle.net/tsap/9vumxk5k/

(function() {
  var tbl = $("#my_table"), tr = tbl.find("tr:first");
  tbl.find("tr > td").each(function(i, item) {
    item = $(item);     
    if (i % 2 == 0) {
        tr = $('<tr>').appendTo(tbl);
    }
    if (i > 1) {
      item.remove();
      tr.append(item);
    }
  });
})();