Question

我有一个列出各种项目的HTML表格。每个<tr>都有一个唯一的title元素，但有些项是相关的，而这些行共享相同的标题。我正在尝试编写解析此表的jQuery代码，并仅将具有相同标题的项转换为简单的手风琴，然后在它们上方注入一个新的可点击行，该行将使用该共享标题作为内容，并切换相关的点击的项目。

这是一个示例表，在转换之前“Orange”项目是相关的：

<table>
    <tr title="Banana">
        <td>Document 1</td>
    </tr>
    <tr title="Apple">
        <td>Document 2</td>
    </tr>
    <tr title="Orange">
        <td>Document 3</td>
    </tr>
    <tr title="Orange">
        <td>Document 4</td>
    </tr>
    <tr title="Orange">
        <td>Document 5</td>
    </tr>
    <tr title="Lemon">
        <td>Document 6</td>
    </tr>
    <tr title="Cherry">
        <td>Document 7</td>
    </tr>
</table>

这是我正在尝试将此表转换为。基本上我隐藏了相关的项目，我正在使用它们上方新创建的行来显示/隐藏：

<table>
    <tr title="Banana">
        <td>Document 1</td>
    </tr>
    <tr title="Apple">
        <td>Document 2</td>
    </tr>
    <tr title="Orange">
        <td>Orange (click to toggle)</td>
    </tr>
    <tr title="Orange" style="display:none;">
        <td>Document 3</td>
    </tr>
    <tr title="Orange" style="display:none;">
        <td>Document 4</td>
    </tr>
    <tr title="Orange" style="display:none;">
        <td>Document 5</td>
    </tr>
    <tr title="Lemon">
        <td>Document 6</td>
    </tr>
    <tr title="Cherry">
        <td>Document 7</td>
    </tr>
</table>

注1：标题可以是任何内容。我这里只是用“橙色”作为例子，但实际上标题可以是多个单词。

注2：相关项目将一个接一个地堆叠。

实现这一目标的最简单方法是什么？

Answer 1

你可以从这里开始

＆＃13;

// swift 3:
var request = URLRequest(url: URL(string: usersDataPoint)!)
request.addValue("Token \(tokenString)", forHTTPHeaderField: "Authorization")

＆＃13;

// swift 2:
let request = NSMutableURLRequest(URL: NSURL(string: usersDataPoint)!)
request.addValue("Token \(tokenString)", forHTTPHeaderField: "Authorization")

＆＃13;

注意：如果后面有相同的tr标题，此代码将正常工作彼此..需要一点点工作来安排他们如果它随机安排

Answer 2

如果我可以假设所有相同类型的项目组合在一起：

// Step 1: Code to add an extra row if there are multiple occurrences of an item
// This is not dynamic yet
if($("tr[title='Orange']").length>1){ // if there is more than one occurance
   $("tr[title='Orange']").first().before('<tr title="Orange"><td>Orange (click to toggle)</td></tr>')
}

    // Step 2: Loop through the items to make the above code dynamic
var ftypes = [];
$("table tr").each(function(idx)){
// get one of each type of fruit
if(ftypes.indexOf($(this).attr('title'))<0) ftypes.push($(this).attr('title'));
});

ftypes.forEach(function(fruit){
// if each fruit have more than one occurrence then add a row above
   if($("tr[title='"+fruit+"']").length>1){
       $("tr[title='"+fruit+"']").first().before('<tr title="'+fruit+'"><td>Orange (click to toggle)</td></tr>')
    }
});

Answer 3

希望这可以做你需要它做的事情，我添加了一个额外的行来仔细检查它是否正常工作。

我希望评论能够提供足够的帮助，如果有任何不清楚的地方，请告诉我。

function click_handler(e) {
  var $this = $(this);
  //I am too lazy to write $(this) over and over again
  $('tr[title="' + $this.prop('title') + '"]').not($this).toggle();
  //First Part: gets all TR elements with same title
  //Next Part: but not this element
  //Toggle their visibility;
}
$(document).ready(function() {
  var prev; //Previous Element.
  var prev_i = 0; //previous level.
  $('tr').each(function(i, el) {
    el = $(el);
    if (prev != null) {
      //So we are not at the first element.
      if (prev.prop('title') == el.prop('title')) {
        //The previous title and the current el title are the same.
        if (prev_i == 0) {
          prev.text(prev.text() + "(click to toggle)");
          //If we are at previous level 0, meaning we have not encountered this portion of the loop before, we need to add the "click to toggle" text.
          prev.on('click', click_handler.bind(prev));
          //Add the click_handler, bound to the previous element (first).
        }

        el.hide(); //Hide any not-first element with the same title

        ++prev_i;
      } else {
        prev_i = 0;
        //If the titles are different, we reset the previous level.
      }

    } //end prev!=null
    prev = el;
    //set previous element
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr title="Banana">
    <td>Document 1</td>
  </tr>
  <tr title="Apple">
    <td>Document 2</td>
  </tr>
  <tr title="Orange">
    <td>Orange</td>
  </tr>
  <tr title="Orange">
    <td>Document 3</td>
  </tr>
  <tr title="Orange">
    <td>Document 4</td>
  </tr>
  <tr title="Orange">
    <td>Document 5</td>
  </tr>
  <tr title="Lemon">
    <td>Document 6</td>
  </tr>
  <tr title="Lemon">
    <td>Document 7</td>
  </tr>
  <tr title="Cherry">
    <td>Document 8</td>
  </tr>
</table>

如何仅使用特定的表行构建简单的手风琴？

3 个答案: