Question

我正在使用ASP开展项目，而且我不熟悉Javascript或Jquery

我找到了一些代码，如果我点击一行，它会改变颜色。

我现在想要在单击一行时将显示更改为正常，然后在单击任何其他行时隐藏它。

到目前为止我有什么

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>INFO</th> 
</tr> 
</thead> 
<tbody> 
<tr onclick="changeMe(this);"> 
    <td>INFO</td> 
            <tr class="versionRow" style ="display:none">
                <td>INFO</td>
            </tr>
</tr> 
</tbody> 
</table>

我改变颜色的脚本。

<script>
    var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;
    }
</script>

我只是希望能够在点击它时显示类versionRow的行。

有任何想法或建议吗？谢谢。

Answer 1

这是一种方法：

function hasClass(el, needle) {
    if (!el || !needle) {
        return false;
    }
    else {
        var classes = el.className.split(/\s+/);
        for (var i = 0, len = classes.length; i < len; i++) {
            if (classes[i] == needle) {
                return true;
            }
        }
        return false;
    }
}

function nextElementSiblingShim(el) {
    if (!el) {
        return false;
    }
    else {
        return el.nextSibling.nodeType == 1 ? el.nextSibling : nextElementSiblingShim(el.nextSibling);
    }
}

function changeMe(el) {
    if (!el) {
        return false;
    }
    else {
        var nextElem = el.nextElementSibling || nextElementSiblingShim(el);
        if (hasClass(nextElem, 'versionRow')) {
            nextElem.style.display = window.getComputedStyle(nextElem, null).display !== 'none' ? 'none' : 'table-row';
        }
    }
}

var rows = document.getElementsByClassName('changeMe');

for (var i = 0, len = rows.length; i < len; i++) {
    rows[i].onclick = function(){
        changeMe(this);
    };
}

这确实依赖于结构良好的HTML：正如我对您的问题的评论中所述，tr只是 table的有效孩子，{{ 1}}，thead和tbody个元素。不是另一个tfoot的有效孩子。您可以在tr内嵌套table，但td 中除之外<{>> 1}}和tr。也就是说，以下HTML将允许上述脚本工作：

td

JS Fiddle demo

请注意，我已经取出了th事件处理程序，将行为与标记分开，并且希望将来可以使事情更易于维护。我还从其父级移动了（无效的）嵌套<table id="myTable" class="tablesorter"> <thead> <tr> <th>INFO</th> </tr> </thead> <tbody> <tr class="changeMe"> <td>INFO</td> </tr> <tr class="versionRow"> <td>INFO</td> </tr> </tbody> </table>，并将其作为兄弟添加。

Answer 2

我已经有一段时间了，因为我没有jQuery这样做，试试这个

<script>
    var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;

        // ok so you are using jquery. The above isn't at all!
        // in which case it's so simple
        el.find('.versionRow').show();
    }
</script>

Answer 3

问题在于您无法在一行中添加行。所以你的浏览器（至少是chrome）代替了这个html部分：

<tr onclick="changeMe(this);"> 
    <td>INFO</td> 
            <tr class="versionRow" style ="display:none">
                <td>INFO</td>
            </tr>
</tr>

此：

<tr onclick="changeMe(this);"> 
    <td>INFO</td>
</tr> 
<tr class="versionRow" style ="display:none">
    <td>INFO</td>
</tr>

因此，如果您只有一个类名为versionRow的元素，则在重新格式化代码时应该没有问题，就像浏览器那样。您所要做的就是添加这行jquery代码：

$('.versionRow').css("display","block");

但是如果要显示您单击的子项的versionBlock，则必须将html重新格式化为。它看起来像这样：

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>INFO</th> 
</tr> 
</thead> 
<tbody> 
<tr onclick="changeMe(this);" > 
    <td>INFO</td> <td><span style="display:none;" class="versionRow" >INFO</span></td>
</tr>
</tbody> 
</table>

脚本将如下所示：

var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        $('span.versionRow',el).css("display","block");

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;
    }

JSFIDDLE Demo

在点击JQUERY时显示和隐藏表格行

3 个答案: