0

对不起，这很长，但我有 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 页面视图可过滤。页面顶部会有表格，用户可以选择一个值范围（开始/结束），结果将与该范围内的上述两个表格相同。用户还可以搜索行 ID（例如 r1、r2、r3），这将显示上面的详细信息表。我能找到的唯一接近这种功能的例子是 tiddlywiki。http://tiddlywiki.com/

但是有没有一种简单的方法，比如使用 jQuery，来完成这个过滤和搜索功能？

4

1 回答 1

0

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();
}
于 2013-04-02T11:25:45.093 回答