Question

当用户在主记录上进行陈词滥调时，我需要隐藏/显示一些html表格详细信息。我在这里找到了一个不错的剧本http://blog.movalog.com/a/javascript-toggle-visibility/。所以我试图为表记录集制作一个DIV来显示/隐藏所有记录集，但似乎它不起作用。

这是我的脚本whit 3演示记录集，最后一个（不是表）是唯一一个按需工作，但我需要在html表记录集上实现它。

我希望我的问题清楚。谢谢你的帮助！

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == "block")
          e.style.display = "none";
       else
          e.style.display = "block";
    }
</script>
<div class="demoProducts" >
<table id="products" width="100%" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr><th class="left">Descripción</th></tr>
</thead>
<tbody>

<tr onclick="toggle_visibility('0101');"><td bgcolor="#CDCDCD" style="font-size:16px"><b>Clic Here to Toggle - MASTER I</b></td></tr>
<div id="0101">
<tr> <td>DETAIL I.1</td></tr>
<tr> <td>DETAIL I.2</td></tr>
<tr> <td>DETAIL I.3</td></tr>
<tr> <td>DETAIL I.4</td></tr>
<tr> <td>DETAIL I.5</td></tr>
</div>

<tr onclick="toggle_visibility('0102');">
<td class="left" bgcolor="#CDCDCD" style="font-size:16px"><b>Clic Here to Toggle - MASTER II</b></td></tr>
<div id="0102">
<tr> <td class="left">DETAIL II.1</td></tr>
<tr> <td class="left">DETAIL II.2</td></tr>
</div>
</tbody>
</table>
</div>

<a onclick="toggle_visibility('0103');"><bgcolor="#CDCDCD" style="font-size:16px"><b>Click here to toggle</b></a>
<div id="0103">This is Working</div>

Answer 1

那么从哪里开始，由于html5 data attribute and querySelectorAll，我的解决方案将适用于新的浏览器，所以让我们开始吧。我修改了你的HTML，我移动你的CSS和JavaScript。确实，您无法在<div>之间使用<tr>。我已为class="detail"添加了text-align: left; text-transform: uppercase;，也提供了表格样式以及所有＆＃39; links / trigger＆＃39;太。所以在这里修改了html。您可以看到所有代码here。

<div class="demoProducts">
    <table id="products">
        <thead>
            <tr><th>Descripción</th></tr>
        </thead>
        <tbody>
            <tr>
                <td data-target="i" class="js-hide-siblings trigger">
                    Clic Here to Toggle - MASTER I
                </td>        
            </tr>
            <tr data-detail="i" class="detail">
                <td>detail i.1</td>
            </tr>
            <tr data-detail="i" class="detail">
                <td>detail i.2</td>
            </tr>
            <tr data-detail="i" class="detail">
                <td>detail i.3</td>
            </tr>
            <tr data-detail="i" class="detail">
                <td>detail i.4</td>
            </tr>
            <tr data-detail="i" class="detail">
                <td>detail i.5</td>
            </tr>
            <tr>
                <td data-target="ii" class="js-hide-siblings trigger">Clic Here to Toggle - MASTER II</td>
            </tr>
            <tr data-detail="ii" class="detail">
                <td>detail ii.1</td>
            </tr>
            <tr data-detail="ii" class="detail">
                <td>detail ii.2</td>
            </tr>
        </tbody>
    </table>
</div>
<a data-target="working" class="js-hide-siblings trigger">Click here to toggle</a>
<div data-detail="working" class="detail">This is Working</div>

我的Css：

.hide { display: none; }

table {
    border-spacing: 0; /*cellpadding=0*/
    border-collapse: collapse; /*cellspacing="0"*/
    border: none;
    width: 100%;
}

th,
.detail { text-align: left; }

.trigger {
    background-color: #cdcdcd;
    font-size: 16px;
    font-weight: bold;
}

.detail { text-transform: uppercase; }

和javascript：

var hideTrigger = document.querySelectorAll('.js-hide-siblings'),
i,j;

for (i = 0; i < hideTrigger.length; i++) {
    hideTrigger[i].addEventListener('click', function(e) {
        var siblings = document.querySelectorAll('[data-detail=' +e.target.getAttribute('data-target')+']');
        /* siblings target all detail tr's with data-detail attribute that is same as triger data-target attribute*/
        e.preventDefault(); /*for links to remove normal click behavior*/
        for (j = 0; j < siblings.length; j++) {
            siblings[j].classList.toggle('hide'); /* if target have hide class i remove it, if not i add */
        }
    });
}

希望它会有所帮助

为什么要切换隐藏/显示不在桌面上工作？

1 个答案: