jquery - .insertAfter 重新排序变量中的字符串

Question

我正在使用一个编写过时代码但可以访问 css 和 javascript 的外部系统。我正在使用一个表，该表将每个元素写入单独的行，在某些情况下最多 30 行。我需要将 tr 分成 6 行，每行 5 项。

计划是将每个 tr 的样式更改为 display:table-cell 以使它们水平列出。然后每 5 行添加一个类。然后在添加类的每 5 个 tr 之后插入结束和开始的 tbody 和 table 标签，为每 5 个 tr 创建单独的表。因此强制每 5 个 tr 存在于它自己的表中并创建 5 行。

除了 .insertAfter 之外一切正常。我需要 </tbody></table><table class='tableBreaker'><tbody>在每 5 次 tr 之后插入，但它会反转我的代码并写入 <table class="tableBreaker"><tbody></tbody></table> .

我在 .insertAfter 中找不到任何关于 jquery 重写字符串的信息。

表格 HTML:

<table id="mainContent_rbl_zoneList" class="tnew-selectseating-form-zone-radio">
<tbody>
    <tr>
        <td><input id="mainContent_rbl_zoneList_0" type="radio" name="ctl00$mainContent$rbl_zoneList" value="151" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$0\',\'\')', 0)"><label for="mainContent_rbl_zoneList_0">&nbsp;10:15</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_1" type="radio" name="ctl00$mainContent$rbl_zoneList" value="152" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$1\',\'\')', 0)"><label for="mainContent_rbl_zoneList_1">&nbsp;10:30</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_2" type="radio" name="ctl00$mainContent$rbl_zoneList" value="153" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$2\',\'\')', 0)"><label for="mainContent_rbl_zoneList_2">&nbsp;10:45</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_3" type="radio" name="ctl00$mainContent$rbl_zoneList" value="154" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$3\',\'\')', 0)"><label for="mainContent_rbl_zoneList_3">&nbsp;11:00</label></td>
    </tr><tr>
        <td><input id="mainContent_rbl_zoneList_4" type="radio" name="ctl00$mainContent$rbl_zoneList" value="155" checked="checked"><label for="mainContent_rbl_zoneList_4">&nbsp;11:15</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_5" type="radio" name="ctl00$mainContent$rbl_zoneList" value="156" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$5\',\'\')', 0)"><label for="mainContent_rbl_zoneList_5">&nbsp;11:30</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_6" type="radio" name="ctl00$mainContent$rbl_zoneList" value="157" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$6\',\'\')', 0)"><label for="mainContent_rbl_zoneList_6">&nbsp;11:45</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_7" type="radio" name="ctl00$mainContent$rbl_zoneList" value="158" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$7\',\'\')', 0)"><label for="mainContent_rbl_zoneList_7">&nbsp;12:00</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_8" type="radio" name="ctl00$mainContent$rbl_zoneList" value="159" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$8\',\'\')', 0)"><label for="mainContent_rbl_zoneList_8">&nbsp;12:15</label></td>
    </tr>
    <tr>
        <td><input id="mainContent_rbl_zoneList_9" type="radio" name="ctl00$mainContent$rbl_zoneList" value="160" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContent$rbl_zoneList$9\',\'\')', 0)"><label for="mainContent_rbl_zoneList_9">&nbsp;12:30</label></td>
    </tr>
</tbody>
</table>

CSS:

table#mainContent_rbl_zoneList tr {
    display: table-cell;
}

jQuery:

$("#mainContent_rbl_zoneList.tnew-selectseating-form-zone-radio tr").each( function (index) {
  index += 1;
  if(index % 5 == 0) {
    $(this).addClass("breakRow");
  }
});

var tableBreaker = "</tbody></table><table class='tableBreaker'><tbody>";
$(tableBreaker).insertAfter('tr.breakRow');

Answer 1

此函数应将 rowCount 行移动到新表，将旧表类移动到新表类。

function movem(rowCount) {
  var oldTable = $('#mainContent_rbl_zoneList'),
    holder = oldTable.parent().eq(0),
    rows = oldTable.find('tr');
  var classes = oldTable.prop("classList");
  var temptable = $('<table>');
  $.each(classes, function(index, value) {
    temptable.addClass(value);
  });
  for (var i = 0; i < rows.length; i = i + rowCount) {
    var newTable = temptable.clone(),
      tbody = $('<tbody>');
    rows.slice(i, i + 5).appendTo(tbody);
    newTable.append(tbody).appendTo(holder);
  }
  oldTable.remove();
}
movem(5);

如果您将事件处理程序绑定(bind)到旧表，这可能会产生问题，您需要考虑到这一点。

请注意，我将新表应用到旧表父容器的末尾，无论它是什么。

要修复 CSS，您还可以这样做:

temptable.addClass("rowcontainer");

和

.rowcontainer tr {
    display: table-cell;
}

示例:https://jsfiddle.net/n3nqespn/