将属性实现到预先构建的表

Question

我正在使用一个自动生成包含数据的表的软件，我正在尝试添加一些扩展/折叠功能。我无法改变在软件中创建表的方式，因此我尝试的选项是使用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>

我手动更新了表格，以便从Alvaro的例子中复制表格：

    <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'的唯一方法是访问子标签，并且它包含'oh'然后它是一个父行，如果它包含'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(){
	
	$("[lid='exampleRS'] tr").each(function(){
		$(this).attr("data-id", $(this).index());
	});

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

});

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

任何前进和后续步骤的帮助都会很棒。

Answer 1

您使用javascript标记了您的问题，因此non- jquery答案：

1. 迭代行
2. 检查td是否带有oh类。如果是，请使用递增计数器应用标头类和data-属性。增加parent计数器。
3. 检查td是否带有lc类。如果是，请使用递增计数器和递增的data-计数器应用子类和parent属性。请勿递增parent计数器。

这是一次尝试：

＆＃13;
＆＃13;
var rows = document.querySelectorAll('table[LID="exampleRS"] tr'), 
	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..
  	parent = data; // increment the parent counter
	rows[i].setAttribute('data-id', ++data); // set the data-id attibute incrementally
	rows[i].setAttribute('data-parent', ''); // reset the data-parent attribute
	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...
	rows[i].setAttribute('data-id', ++data); // set the data-id attibute incrementally
	rows[i].setAttribute('data-parent', parent); // set the data-parent attibute 
	rows[i].classList.add('child'); // add class to show it as parent
  }
}
＆＃13;
.parent { font-weight: bold; }
.child { font-style: italic; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

工作示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;