プレーンJavaScript（jQueryなし）を使用して、特定のtr子にtbody要素を分割しますか？

-4

これは入力テーブルの一例であってもよい：startId = "TR2" とプレーンJavaScript（jQueryなし）を使用して、特定のtr子にtbody要素を分割しますか？

<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>

。 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>

これはどのように達成できますか？前もって感謝します。

出典

2016-06-11 ElPalomo

あなたがこれまでにしようとしているかを示すだろうか？ Stackoverflowはあなたのコードを実装するためのものではありません。 – mnwsmit

それは非常に具体的な説明であり、答えは他のコーダーに役立たないでしょう。要するに、私はTinyMCEプラグインを作成しています。これは動的な属性を持つユーザー選択をタグ付けしています。ユーザーがテーブル外のコンテンツ（またはテーブルを含む）を選択したときや、ユーザーが2つ以上の行内のコンテンツを選択すると、本当の問題に直面しています。私は包括的な研究を行いました。これまで類似したものを達成するための一般的なウォークスルーは見つけられませんでした。それが私が尋ねる理由です。 – ElPalomo

それが他のコーダーを助けることができないなら、それはまたofftopicです。広い質問のために、広い答え。いくつかの変数にセルを保存してから、テーブルのinnerHTMLを空にして、必要に応じて書き換えます。 – LordNeo

これに取り組む最も簡単な方法は、正しいtbodyの行を繰り返し処理し、htmlの置換ブロックを作成することです。

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");

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; }

<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>

出典

2016-06-26 02:47:45 JonSG

プレーンJavaScript（jQueryなし）を使用して、特定のtr子にtbody要素を分割しますか？

答えて

関連する問題