javascript - 使用 Javascript/CSS 自定义 View 的带有用户过滤器选项的静态表？

Question

抱歉，这很长，但我有 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

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

最后一部分是让 html 页面 View 可过滤。页面顶部会有一个表格，用户可以选择一个值范围(开始/结束)，结果将与该范围内上面的两个表格相同。用户还可以搜索行 ID(例如 r1、r2、r3)，这将显示上面的详细信息表。我能找到的唯一接近此类功能的示例是 tiddlywiki。 http://tiddlywiki.com/

但是有没有一种简单的方法(也许是使用 jQuery)来执行此过滤和搜索功能？

Answer 1

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();
}