在javascript代码中只展开一行

Expand only one row in javascript code

本文关键字：一行 javascript 代码      更新时间：2023-09-26

嘿，伙计们很难弄清楚如何制作它，这样我就可以让它一次只打开一个表，一旦你打开了另一个，另一个应该关闭这里的任何帮助吗？

function showRow(cctab){
if (document.getElementById(cctab)) {
    document.getElementById(cctab).style.display = ''; 
}
}
function hideRow(row1){
if (document.getElementById(cctab)) {
    document.getElementById(cctab).style.display = 'none';
}
}
function toggleRow(cctab){
if (document.getElementById(cctab)) {
    if (document.getElementById(cctab).style.display == 'none') {
        showRow(cctab)
    } else {
        hideRow(cctab)
    }
}
}

现在，我想在我建议onClick="javascript:toggleRow（cctab）；"之后，只打开一个表"cctab"，有帮助吗？

您可以保存对先前显示的项目的引用，并在显示另一个项目时将其隐藏：

var currentTab;    
function showRow(cctab){
    if (document.getElementById(cctab))
        document.getElementById(cctab).style.display = '';
    if (currentTab && currentTab != cctab)
        hideRow(currentTab);
    currentTab = cctab;
}

请注意，执行内联事件处理程序属性是所以1999，但假设您出于任何原因坚持使用它，则不需要onClick="javascript:toggleRow(cctab);"中的javascript:。（只说onClick="toggleRow(cctab);"）

首先需要将旧行存储在某个位置。您所拥有的是一个使用<element onclick="...">将当前元素的id传递到显示或隐藏行的控制器的系统。

但如果你仔细看，你所缺少的是一种告诉最后一排空位是什么的方式。因此，您的代码将需要一个中心对象，或者存储旧元素和新元素的变量。

如何做到这一点取决于你，但如果你做了这样的事情：

var table_rows = { current : null /* or set a default */, previous : null };
function rowController (cctab) {
    var newRow = document.getElementById(cctab);
    if (newRow === table_rows.current) { toggleRow(newRow); }
    else {
        table_rows.previous = table_rows.current;
        table_rows.current = newRow;
        showRow(table_rows.current);
        hideRow(table_rows.previous);
    }
}

注：

  1. 这直接处理元素，因此您不必在函数中执行getById；处理一次，然后传递、保存和检查该元素。

  2. 它假设点击发生在行本身，而不是行内部的任何东西上
    这是您的代码存在的另一个问题
    除非单击行（而不是行内的单元格）是显而易见且容易的，否则很难判断您希望用户如何打开和关闭行
    我的意思是，如果只有表行有onclick，并且有人点击了表列，那么onclick就不会启动。

相关文章：