带有用户过滤器选项的静态表使用Javascript / CSS自定义视图

Static tables with user filter options to custom views using Javascript / CSS?

本文关键字：Javascript CSS 视图 自定义 用户 过滤器 选项 静态      更新时间：2023-09-26

对不起，这是很长，但我有3个问题涉及到同样的问题。任何建议将不胜感激!

我有一个将CSV文件转换为静态HTML文件(或XML文件)的脚本。

例如，这是HTML文件: 
<div id="r1">
<div id="r1_hardware_name">Hard disk meter</div>
<div id="r1_software_name">Hard_disk_meter</div>
<div id="r1_description">Hard disk meter for temperature</div>
<div id="r1_size">64</div>
<div id="r1_status">Active</div>
<div id="r1_version">5</div>
<div id="r1_value">0x00001<div>
</div>
<div id="r2">
<div id="r2_hardware_name">CPU meter</div>
<div id="r2_software_name">CPU_meter</div>
<div id="r2_description">CPU meter for temperature</div>
<div id="r2_size">32</div>
<div id="r2_status">Active</div>
<div id="r2_version">1</div>
<div id="r2_value">0x00002<div>
</div>
<div id="r3">
<div id="r3_hardware_name">Memory meter</div>
<div id="r3_software_name">Memory_meter</div>
<div id="r3_description">Memory meter for temperature</div>
<div id="r3_size">64</div>
<div id="r3_status">Passive</div>
<div id="r3_version">2</div>
<div id="r3_value">0x00003<div>
</div>

在HTML页面上，这需要显示在两个单独的表中。就像下面这样。是否可以使用CSS根据上面的html制作这些表?

HW Name           Size    Status
Hard disk meter   64      active
CPU meter         32      active
Memory meter      64      passive
SW Name           Version  Value
Hard_disk_meter   5        0x00001
CPU_meter         1        0x00002
Memory_meter      2        0x00003

该页面还需要在名称上有链接。这样，当用户单击任一表上的"Hard disk Meter"名称时，它将显示一个详细信息表，如:

HW Name:     Hard Disk Meter
SW Name:     Hard_disk_meter
Description: Hard disk meter for temperature
Size:        64
Status:      Active
Version:     5
Value:       0x00001

我认为这部分可以使用某种javascript来完成。我正在考虑使用jQuery与一个简单的切换隐藏其余的文档和显示附加到另一个CSS表定义的详细信息表。这是最好的办法吗?

最后一部分是有html页面视图过滤器。将有形式在页面的顶部，用户可以选择一个值范围(开始/结束)，结果将是相同的两个表在该范围以上。用户还可以搜索行id(例如r1, r2, r3)，这将显示上面的详细信息表。我能找到的唯一接近这种功能的例子是tiddlywiki。http://tiddlywiki.com/

但是有一个简单的方法，也许使用jQuery，做这个过滤和搜索功能?

HTML变化 

<div id="r1_value">0x00001</div>

div标记在r1,r2,r3中未关闭

CSS 

#r1,#r2,#r3,.details_r1,.details_r2,.details_r3{
display:none;
margin:20px;
}
.container{
margin:20px;
}

JS 

var meterId = ['r1','r2','r3'];
var parameters1 = ['hardware_name','size','status']
var parameters2 = ['software_name','version','value'];
var tableTemplate='<div class="container"><table><tr><td>HW Name</td><td>Size</td><td>Status</td></tr>';
for(i=0;i<meterId.length;i++){
tableTemplate += '<tr>';
for(j=0;j<3;j++){
    var x = '#'+meterId[i]+'_'+parameters1[j];
    if(j==0)
        tableTemplate += '<td><a href="#" onclick=detailsShow("'+meterId[i]+'")>'+$(x).html()+'</a></td>';
    else
        tableTemplate += '<td>'+$(x).html()+'</td>';    
}
tableTemplate += '</tr>';
}
tableTemplate += '</table></div>';
tableTemplate +='<div class="container"><table><tr><td>SW Name</td><td>Version</td><td>Value</td></tr>';
for(i=0;i<meterId.length;i++){
tableTemplate += '<tr>';
for(j=0;j<3;j++){
    var x = '#'+meterId[i]+'_'+parameters2[j];
    tableTemplate += '<td>'+$(x).html()+'</td>';    
}
tableTemplate += '</tr>';
}
tableTemplate += '</table></div>';
$("body").append($(tableTemplate));
var detailsTemplate = '';
for(i=0;i<meterId.length;i++){
detailsTemplate += '<div class="details_'+meterId[i]+'"><table>';
for(j=0;j<3;j++){
    var x = '#'+meterId[i]+'_'+parameters1[j];
    var y = '#'+meterId[i]+'_'+parameters2[j];
    detailsTemplate += '<tr><td>'+parameters1[j]+'</td><td>'+$(x).html()+'</td></tr>';  
    detailsTemplate += '<tr><td>'+parameters2[j]+'</td><td>'+$(y).html()+'</td></tr>';  
}
detailsTemplate += '</table></div>'
 }
 $("body").append($(detailsTemplate));
function detailsShow(x){
$('[class^="details_"]').hide();
$('.details_'+x).show();
}
相关文章：