0

我正在用 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 的行。

有什么想法或建议吗？谢谢你。

4

3 回答 3

4

这是一种方法：

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：正如我对您的问题的评论中所述， a只是 a 、tr和元素的有效子级。它不是another 的有效子代。您可以将 a 嵌套在 a内，但 a 内不应有除and之外的元素。也就是说，以下 HTML 将允许上述脚本工作：tabletheadtbodytfoottrtabletdtr tdth

<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>​​​​​​​

JS 小提琴演示。

请注意，我已经删除了onclick事件处理程序，以将行为与标记分开，并希望将来使事情更易于维护。我还tr从其父级中移动了嵌套的（无效）并将其添加为同级。

于 2012-11-24T22:29:47.287 回答
1

这样做的问题是您不能在一行中添加一行。所以你的浏览器（至少是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");

但是，如果您想显示您单击的孩子的版本块，您必须将 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 演示

于 2012-11-24T22:36:44.913 回答
1

自从我在没有 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>
于 2012-11-24T21:57:52.690 回答