jQuery table表格同類內容摺疊效果

antzone發表於2017-03-31
jQuery

在實際應用中，可能表格資料比較龐大，並且裡面的資料可以分類，也就是相同型別的資料可以放在相鄰的行中，如果這個是時候能夠實現相同型別的行摺疊效果，那麼將會極大的遍歷使用者對於資料的瀏覽和使用，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
Array.prototype.filterRepeat=function(){ 
  var res=[],hash={}; 
  for (var i = 0, elem; (elem = this[i]) != null; i++) {
    if(!hash[elem]){ 
      res.push(elem); 
      hash[elem] = true; 
    } 
  } 
  return res; 
} 
$(function(){ 
  var json=[ 
{ "SysName": "資料庫", "SysGuid": "1", "CourseName": "SQL", "CourseGuid": "22", "Remarks": "大sb", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "資料庫", "SysGuid": "1", "CourseName": "MySQL", "CourseGuid": "23", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "資料庫", "SysGuid": "1", "CourseName": "NoSQL", "CourseGuid": "24", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "資料庫", "SysGuid": "1", "CourseName": "Oracle", "CourseGuid": "25", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "基礎", "CourseGuid": "43", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "高階", "CourseGuid": "44", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-4-1", "thirdresult": "合格" }, 
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "基礎", "CourseGuid": "54", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-5-1", "thirdresult": "合格" }, 
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "高階", "CourseGuid": "67", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-6-1", "thirdresult": "合格" }, 
]; 
  createTable(json);
}); 
function createTable(json){ 
  var tb=$("#tb"); 
  var sys=new Array; 
  for(var i=0;i<json.length;i++){ 
    sys.push(json[i].SysName); 
  } 
  //過濾重複 
  sys=sys.filterRepeat(); 
  var tr=null; 
  for(var j=0;j<sys.length;j++){ 
    tr+="<tr style='text-align: left' class=gridborder id=p"+j
    +"><td colspan=8>[-]"+sys[j]
    +"</td></tr>"; 
    for(var i=0;i<json.length;i++){ 
      if(json[i].SysName==sys[j]){ 
        tr+="<tr parent=p" + j + " style='text-align: center' pguid='" 
        + json[i].SysGuid + "' cguid='" 
        + json[i].CourseGuid + "'><td>" 
        + json[i].CourseName + "</td><td>" + setDate(json[i].firstdate) 
        + "</td><td>" + setSelect(json[i].firstresult) 
        + "</td><td>" + setDate(json[i].secdate) 
        + "</td><td>" + setSelect(json[i].secresult) 
        + "</td><td>" + setDate(json[i].thirddate) 
        + "</td><td>" + setSelect(json[i].thirdresult) 
        + "</td><td>" + setInput(json[i].Remarks) + "</td></tr>" 
      } 
    } 
  } 
  tb.append(tr); 
  //設定行點選事件 
  $("tr.gridborder").css("cursor", "pointer").toggle(function(){ 
    var txt = $(this).children().text(); 
    $(this).children().text(txt.replace("-", "+")); 
  },function(){ 
    var txt=$(this).children().text(); 
    $(this).children().text(txt.replace("+", "-")); 
  }).click(function () { 
    var id=$(this).attr("id"); 
    $(this).siblings("tr[parent='" + id + "']").toggle(); 
  }); 
  //設定選中變色 
  $("tr[parent^=p]").toggle(function(){ 
    $(this).attr('bgcolor', '#E3e4e5'); 
  }, function(){ 
    $(this).attr('bgcolor', '#ffffff'); 
  }); 
} 
function setSelect(obj) { 
  return "<select style='width:96%'><option value ='" 
  + obj + "'>" + obj 
  + "</option ><option value='合格'>合格</option><option value='不合格'>不合格</option></select>"; 
} 
function setDate(obj){ 
  return "<input style='width:96%' type='text' value='" + obj + "' />"; 
} 
function setInput(obj) { 
  return "<input style='width:96%' type='text' value='" + obj + "' />"; 
} 
</script>
</head>
<body>
<form id="form1">
<div>
  <table id="tb" border="1" style="border-collapse: collapse" width="100">
    <tbody>
      <tr style="text-align: center">
        <td style="width: 100px">課程名稱</td>
        <td style="width: 120px">初考時間</td>
        <td style="width: 120px">初考成績</td>
        <td style="width: 120px">次考時間</td>
        <td style="width: 120px">次考成績</td>
        <td style="width: 120px">清考時間</td>
        <td style="width: 120px">清考成績</td>
        <td style="width: 250px">備註</td>
      </tr>
    </tbody>
  </table>
</div>
</form>
</body>
</html>

相關文章