あらかじめ作成されたテーブルへの属性の実装

私はデータを含むテーブルを自動的に生成するソフトウェアを使用しています。これに加えていくつかの展開/折りたたみ機能を追加しようとしています。私はテーブルがソフトウェア内でどのように作成されるかを変更できないので、私が試みているオプションはjQueryで特定のクラス名と属性を追加することです。あらかじめ作成されたテーブルへの属性の実装

次のプラグインが使用するレイアウトを再作成しようとしています：Alvaro's Collapsable Table Plugin for jQueryしかし、これは最善の方法ではありません。

これは、ソフトウェアが生成するテーブルです：

<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' /> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script> 
 
    
 
    <table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0"> 
 
    <tr> 
 
     <td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td> 
 
     <td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td> 
 
     <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td> 
 
    </tr> 
 
</table>

私は手動でアルバロの例からテーブルを複製するために、テーブルを更新：

<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' /> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script> 
 
    <script type="text/javascript"> 
 
     $(document).ready(function(){ 
 
     $('.collaptable').aCollapTable({ 
 
      startCollapsed: true, 
 
      addColumn: false, 
 
      plusButton: '<span class="icon-plus-circle"></span>', 
 
      minusButton: '<span class="icon-minus-circle"></span>' 
 
     }); 
 
     }); 
 
    </script> 
 

 

 
<table style="border-collapse:collapse;" class="ls collaptable table" LID="exampleRS" cellpadding="0"> 
 
    <tr> 
 
     <td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td> 
 
     <td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td> 
 
    </tr> 
 
    <tr data-id="1" data-parent=""> 
 
     <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td> 
 
     <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td> 
 
    </tr> 
 
    <tr data-id="2" data-parent="1"> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td> 
 
    </tr> 
 
    <tr data-id="3" data-parent="1"> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td> 
 
    </tr> 
 
</table>

元のテーブルから、クラスのdata-idとdata-parentを追加するタグを識別できる唯一の方法は、子タグにアクセスすることであり、それには 'ああ'が含まれています親行に格納され、 'lc'が含まれている場合は子行です。

出発点として、私はテーブル内のすべての 'tr'をループし、 'data-id'を割り当てようとしました。そして、 'tr'に 'lc'の 'td'クラスを'データ - 親'。これは私が試みたものですが、私は不足しています。

<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' /> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script> 
 
    
 
    <script> 
 
    
 
    $(document).ready(function(){ 
 
\t 
 
\t $("[lid='exampleRS'] tr").each(function(){ 
 
\t \t $(this).attr("data-id", $(this).index()); 
 
\t }); 
 

 
\t $("[lid='exampleRS'] td.lc").each(function(){ 
 
\t \t $(this).closest('tr').attr("data-parent", $(this).closest('tr').find('.data-id').text()); 
 
\t }); 
 

 
}); 
 

 
</script> 
 
    
 
    <table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0"> 
 
    <tr> 
 
     <td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td> 
 
     <td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td> 
 
     <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td> 
 
    </tr> 
 
</table>

前方に移動し、次のステップは、素晴らしいことだとどのような援助。

出典

2017-02-28 ashleh

の作業例：

<link rel='stylesheet' href='http://alvaroveliz.github.io/aCollapTable/stylesheets/app.css' /> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://alvaroveliz.github.io/aCollapTable/javascripts/jquery.aCollapTable.js"></script> 
 
    
 
<script> 
 
    
 
    $(document).ready(function() { 
 
     var lastParentId = 0; 
 
     $("[lid='exampleRS'] tr").each(function() { 
 
      var index=$(this).index(); 
 
      if(index==0) return; 
 
      $(this).attr("data-id", index); 
 
      $(this).attr("data-parent", ""); 
 
      if ($(this).find(".lc").length > 0) { 
 
       $(this).attr("data-parent", lastParentId); 
 
      } else { 
 
       lastParentId = $(this).index(); 
 

 
      } 
 
     }); 
 
     $("[lid='exampleRS']").addClass("collaptable"); 
 
     $('.collaptable').aCollapTable({ 
 
      startCollapsed: true, 
 
      addColumn: false, 
 
      plusButton: '<span class="icon-plus-circle"></span>', 
 
      minusButton: '<span class="icon-minus-circle"></span>' 
 
     }); 
 
    }); 
 

 
</script> 
 
    
 
    <table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0"> 
 
    <tr> 
 
     <td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td> 
 
     <td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td> 
 
     <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td> 
 
    </tr> 
 
</table>

出典

2017-02-28 12:27:38

ブリリアですnt、ありがとう:)どのように各親の下の階層のためにこれを調整するつもりですか？手動でモックアップして、目的の効果を作り出す：https://jsfiddle.net/nusy2ay2/ – ashleh

@ashleh https://jsfiddle.net/nusy2ay2/3/ –

あなたは、したがって、javascriptでnon-jquery答えあなたの質問をタグ付け：tdはohのクラスを運ぶ場合

があなたの行
チェックを反復処理します。はいの場合は、インクリメントされたカウンタを使用して、ヘッダークラスとdata-属性を適用します。 parentカウンタをインクリメントします。
tdのクラスがlcであるかどうかを確認してください。はいの場合は、インクリメントされたカウンタとインクリメントされたparentカウンタを使用して、子クラスとdata-属性を適用します。 parentカウンタをインクリメントしないでください。ここで

試みです：

var rows = document.querySelectorAll('table[LID="exampleRS"] tr'), 
 
\t cols, data = 0, parent = 0; 
 

 
for (var i = 0; i < rows.length; i++) { 
 

 
    // Search td with a class of oh 
 
    cols = rows[i].querySelectorAll('td.oh'); 
 
    if (cols.length > 0) { // if found.. 
 
    \t parent = data; // increment the parent counter 
 
\t rows[i].setAttribute('data-id', ++data); // set the data-id attibute incrementally 
 
\t rows[i].setAttribute('data-parent', ''); // reset the data-parent attribute 
 
\t rows[i].classList.add('parent'); // add class to show it as parent 
 
    } 
 
    
 
    // Search td with a class of lc 
 
    cols = rows[i].querySelectorAll('td.lc'); 
 
    if (cols.length > 0) { // if found... 
 
\t rows[i].setAttribute('data-id', ++data); // set the data-id attibute incrementally 
 
\t rows[i].setAttribute('data-parent', parent); // set the data-parent attibute 
 
\t rows[i].classList.add('child'); // add class to show it as parent 
 
    } 
 
}

.parent { font-weight: bold; } 
 
.child { font-style: italic; }

<table style="border-collapse:collapse;" class="ls" LID="exampleRS" cellpadding="0"> 
 
    <tr> 
 
     <td class="cRS10 lt" cid="0" uid="10" name="cRS10" type="columnTitle"><span tabIndex="0" class="textItem" ctx="1">Header</span></td> 
 
     <td class="cRS12 lt" cid="1" uid="12" name="cRS12" type="columnTitle"><span tabIndex="-1" class="textItem" ctx="2">Value</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td> 
 
     <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS15 oh" cid="0" uid="15" name="cRS15" type="section"><span tabIndex="-1" class="textItem" ctx="3">Parent1</span></td> 
 
     <td style="text-align:right" class="cRS17 oh" cid="1" uid="17" name="cRS17" type="section"><span tabIndex="-1" class="textItem" ctx="4:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="5:6:3">Element2</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="6:5:3">123</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="cRS20 lc" cid="0" uid="20" name="cRS20" type="datavalue"><span tabIndex="-1" class="textItem" ctx="7:8:3">Element3</span></td> 
 
     <td style="text-align:right" class="cRS22 lm" cid="1" uid="22" name="cRS22" type="datavalue"><span tabIndex="-1" class="textItem" ctx="8:7:3">123</span></td> 
 
    </tr> 
 
</table>

出典

2017-02-28 12:25:42 Abhitalks

あらかじめ作成されたテーブルへの属性の実装

答えて

関連する問題