Question

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

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

除了.insertAfter外，一切都有效。我需要在每隔5个tr后插入</tbody></table><table class='tableBreaker'><tbody>，但它会反转我的代码并写入<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);

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

请注意，我将NEW表应用于OLD表父容器的末尾。

要修复CSS，您可能也会这样做：

temptable.addClass("rowcontainer");

和

.rowcontainer tr {
    display: table-cell;
}

要播放的示例：https://jsfiddle.net/n3nqespn/

Answer 2

由于您最终尝试使用insertAfter创建新表，您实际上需要执行此操作并将行移动到新表

类似的东西：

var $container = $('#mainContent_rbl_zoneList'),
    $rows = $('#mainContent_rbl_zoneList tr');

for(var i=0; i < $rows.length; i = i+5 ){
   var $newTable = $('<table>'), $tbody = $('<tbody>');
   $rows.slice(i, i+5).appendto($tbody);
   $newTable.append($tbody).appendTo($container);      

}

这只是粗略的，并没有考虑行类

.insert在变量中重新排序字符串

2 个答案: