Javascript 什么基于jquery的表插件可以隐藏子行?
我需要将excel宏转换为jquery代码,其功能是您需要单击加号展开并显示要修改column2的子行。如果要在column2中键入值,则无法修改其他列。在展开父行之前,无法直接修改column2的值,因为有许多子行属于父行,例如Car。名称、模型、代码的值是存在的,它们是主数据,不需要键入或修改 请查看快照: 除了修改子行中的值外,我还需要知道修改了哪些子行以及这些行的值。最初可编辑列为空。当您单击减号时,子行可以再次折叠,但是修改的值不会丢失,当再次展开时它们仍然存在。最后一个要求是它的跨设备,代码必须在pc、手机和pad上运行良好。可能吗Javascript 什么基于jquery的表插件可以隐藏子行?,javascript,jquery,jquery-plugins,jquery-mobile,Javascript,Jquery,Jquery Plugins,Jquery Mobile,我需要将excel宏转换为jquery代码,其功能是您需要单击加号展开并显示要修改column2的子行。如果要在column2中键入值,则无法修改其他列。在展开父行之前,无法直接修改column2的值,因为有许多子行属于父行,例如Car。名称、模型、代码的值是存在的,它们是主数据,不需要键入或修改 请查看快照: 除了修改子行中的值外,我还需要知道修改了哪些子行以及这些行的值。最初可编辑列为空。当您单击减号时,子行可以再次折叠,但是修改的值不会丢失,当再次展开时它们仍然存在。最后一个要求是它的
非常感谢。您不需要插件就可以做到这一点,这通常是通过几行简单的代码来完成的 演示: 在本演示中,我在行和单元格中指定了一个标识“部分”(可以打开或关闭的部分)的属性: 我有一个CSS,它主要允许隐藏封闭部分(并且可以清楚地识别开头部分): 由于不会删除任何内容,因此在关闭然后再次打开时,编辑的输入不会丢失
<table>
<tr><td section-opener=mysection1 section-state=open> SOME HEADER </td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr section-content=mysection1><td>some AAA</td><td>some zaaother text</td></tr>
<tr section-content=mysection1><td>some text</td><td>some other text</td></tr>
<tr><td section-opener=anothersection section-state=close> Hu ? </td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
<tr section-content=anothersection><td>some text</td><td>some other text</td></tr>
</table>
$('body').on('click', 'td[section-opener]', function() {
changeState($(this).attr('section-opener'));
});
changeState = function(sectionId, newstate) {
var $opener = $('td[section-opener="'+sectionId+'"]');
var oldstate = $opener.attr('section-state');
if (oldstate==newstate) return newstate;
newstate = oldstate=='open' ? 'close' : 'open'; // sanitization
$opener.attr('section-state', newstate);
$('tr[section-content="'+sectionId+'"]').attr('section-state', newstate);
return newstate;
};
td[section-opener] {
font-weight: bold;
cursor: pointer;
}
td[section-opener][section-state="close"]:before {
color: #ccc;
content: " \25B6 ";
}
td[section-opener][section-state="close"]:hover:before{
color: #aaa;
content: " \25B6 ";
}
td[section-opener][section-state="open"]:before {
content: "\25BC ";
}
tr[section-content][section-state="close"] {
display: none;
}
tr[section-content][section-state="open"] {
display: table-row;
}