Question

自从我研究并发现什么都没有。这是我面临的问题，我有一个表，从数据库填充。我想要做的就是将具有相同值（患者ID）的所有表行<tr>合并到一个tr中。

例如，我有四名患者，其中一名患者进行了两项研究：

 Patiend ID       Patient Name     Study
    1111            Angela          XRAY
    2222            Bena            Ultrasound
    3333            Luis            CT Scan
    1111            Angela          Ultrasound

除了合并同一患者外，客户还希望添加“+”符号，以便客户知道该患者经历了2次或更多次研究。如果客户点击“+”符号，合并表行将展开显示所有研究。

我想到的是，在我检查所有表格行并查找相同的患者ID后，如果有，则合并或隐藏该表格行并添加“+”。每次医生/客户点击“+”，它就会扩展。

但我不知道如何。

 Patient ID       Patient Name     Study
    1111            Angela          XRAY   "+"
    2222            Bena            Ultrasound
    3333            Luis            CT Scan

如果点击“+”：

 Patient ID       Patient Name     Study
    1111            Angela          XRAY  
    1111            Angela          Ultrasound
    2222            Bena            Ultrasound
    3333            Luis            CT Scan

到目前为止，这是我的代码，只是试图提醒，但这会提醒所有“相同”。

 $(".pid").each(function(n){
            var text = $(this).text();
            $(".pid").each(function(n){             
                var text2 = $(this).text();
                if(text == text2)
                {
                    alert(text2 + "same");
                }
            });
        });

请帮忙。

Answer 1

修改表格非常简单，它已经过rows和cells。即使不是这样（例如CSS表），我们总是可以使用jQuery来查询行和单元格。事实上，要解决您的问题，我们必须做一件名为分组的事情。分组总是要求我们将所有行收集到一组相同的密钥中，这里的关键是父ID。我们可以利用Javascript对象中属性的唯一性将所有行保存到同一个键的属性中。实际上有时候Javascript对象中的属性称为键，我们可以通过它获取值：

object[key] = value;

以下是代码明细：

<强> HTML ：

<table>
  <tr><th>Parent ID</th><th>Parent Name</th><th>Study</th></tr>
  <tr><td>1111</td><td>Angela</td><td>XRAY</td></tr>
  <tr><td>2222</td><td>Bena</td><td>Untrasound</td></tr>
  <tr><td>3333</td><td>Luis</td><td>CT Scan</td></tr>
  <tr><td>1111</td><td>Angela</td><td>Untrasound</td></tr>
  <tr><td>3333</td><td>Luis</td><td>LCD</td></tr>
  <tr><td>3333</td><td>Luis</td><td>LASER</td></tr>
</table>

<强> CSS ：

td {
  width:100px;
  border:1px solid black;      
}
table {
  border-collapse:collapse;    
  font-size:15px;
}
.subrow {        
  font-size:0;
  transition:font-size 400ms;
}
td > span {     
  float:right;
  width:1em;
  height:1em;       
  position:relative;
  margin-right:3px;    
}
td > span:before {
  content:'';
  position:absolute;
  width:80%;
  height:0;
  left:10%;
  top:50%;
  margin-top:-1px;
  border-top:2px solid black; 
  border-color:inherit; 
}
td > span.collapsed:after {
  content:'';
  position:absolute;
  height:80%;
  width:0;
  margin-left:-1px;
  border-left:2px solid black;
  border-color:inherit;
  left:50%;
  top:10%; 
}
td > span:hover {
  border-color:orange;
}

<强> JS ：

var table = $('table')[0];
var rowGroups = {};
//loop through the rows excluding the first row (the header row)
while(table.rows.length > 1){
  var row = table.rows[1];
  var id = $(row.cells[0]).text();
  if(!rowGroups[id]) rowGroups[id] = [];
  if(rowGroups[id].length > 0){
    row.className = 'subrow';
    $(row).slideUp();
  }
  rowGroups[id].push(row);
  table.deleteRow(1);
}
//loop through the row groups to build the new table content
for(var id in rowGroups){
  var group = rowGroups[id];
  for(var j = 0; j < group.length; j++){
    var row = group[j];
    if(group.length > 1 && j == 0) {
        //add + button
        var lastCell = row.cells[row.cells.length - 1];           
        $("<span class='collapsed'>").appendTo(lastCell).click(plusClick);                                         
    }
    table.tBodies[0].appendChild(row);        
  }
}
//function handling button click
function plusClick(e){
  var collapsed = $(this).hasClass('collapsed');
  var fontSize = collapsed ? 14 : 0;
  $(this).closest('tr').nextUntil(':not(.subrow)').slideToggle(400)
         .css('font-size', fontSize);
  $(this).toggleClass('collapsed');        
}

在jquery中合并具有相同值/ ID的多个tr

1 个答案:

Demo