Question

这可能是输入表的一个例子：

    <table>
        <tbody>
            <tr id="tr1InOtherTbody"><td>a1</td><td>a2</td></tr>
        </tbody>
        <tbody>
            <tr id="tr1"><td>11</td><td>12</td></tr>
            <tr id="tr2"><td>21</td><td>22</td></tr>
            <tr id="tr3"><td>31</td><td>32</td></tr>
            <tr id="tr4"><td>41</td><td>42</td></tr>
        </tbody>
        <tbody>
            <tr id="tr2InOtherTbody"><td>b1</td><td>b2</td></tr>
        </tbody>
    </table>

startId =“tr2”; endId =“tr3”。该表需要转换为：

    <table>
        <tbody>
            <tr id="tr1InOtherTbody"><td>a1</td><td>a2</td></tr>
        </tbody>
        <tbody>
            <tr id="tr1"><td>11</td><td>12</td></tr>
        </tbody>
        <tbody id="tr2tr3">
            <tr id="tr2"><td>21</td><td>22</td></tr>
            <tr id="tr3"><td>31</td><td>32</td></tr>
        </tbody>
        <tbody>
            <tr id="tr4"><td>41</td><td>42</td></tr>
        </tbody>
        <tbody>
            <tr id="tr2InOtherTbody"><td>b1</td><td>b2</td></tr>
        </tbody>
    </table>

如何实现这一目标？提前谢谢。

Answer 1

我认为解决这个问题的最简单方法可能是迭代正确的tbody中的行，然后构建一个替换的html块。

＆＃13;

function reformat(startId, endId){
  var startEl = document.getElementById(startId);
  var endEl = document.getElementById(endId);
  
  // ---------------------------
  // make sure we can do something useful
  // ---------------------------
  if (!startEl || !endEl || startEl.parentNode != endEl.parentNode){ console.log("wrong"); return; }
  // ---------------------------

  // ---------------------------
  // find all tr elements of the proper tbody
  // ---------------------------
  var rows = startEl.parentNode.querySelectorAll("tr");
  // ---------------------------

  // ---------------------------
  // construct a new block of html from the rows of interest
  // ---------------------------
  var newHtml = Array.from(rows).reduce(function(html, item){
    if (item.id === startId) {
      html += "</tbody><tbody id=\"" + startId + endId + "\">";
    }

    html += item.outerHTML;

    if (item.id === endId) {
      html += "</tbody><tbody>";
    }

    return html;
  }, "<tbody>");

  newHtml += "</tbody>";
  // ---------------------------

  // ---------------------------
  // overwrite the original tbody with our new html
  // ---------------------------
  startEl.parentNode.outerHTML = newHtml;
  // ---------------------------
}

reformat("tr2","tr3");

＆＃13;

tbody:nth-child(1) { background-color: #aaa; }
tbody:nth-child(2) { background-color: #f88; }
tbody:nth-child(3) { background-color: #8f8; }
tbody:nth-child(4) { background-color: #88f; }
tbody:nth-child(5) { background-color: #aaa; }

＆＃13;

<table>
  <tbody>
    <tr id="tr1InOtherTbody"><td>a1</td><td>a2</td></tr>
  </tbody>

  <tbody>
    <tr id="tr1"><td>11</td><td>12</td></tr>
    <tr id="tr2"><td>21</td><td>22</td></tr>
    <tr id="tr3"><td>31</td><td>32</td></tr>
    <tr id="tr4"><td>41</td><td>42</td></tr>
  </tbody>

  <tbody>
    <tr id="tr2InOtherTbody"><td>b1</td><td>b2</td></tr>
  </tbody>
</table>

＆＃13;

使用纯JavaScript（没有jQuery）拆分特定tr子节点的tbody元素？

1 个答案: