对预构建表执行属性

我正在使用一段自动生成包含数据的表的软件，并且我试图添加一些展开/折叠功能。我无法改变表格在软件中的创建方式，所以我试图使用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'分配给一个'td'类'lc'给一个“数据父”。这是我所尝试过的，但我缺乏。

<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

那的Brillia 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

对预构建表执行属性

回答

相关问题