javascript - 连接 javascript 事件并传递参数

Question

一点背景:我有一个包含表格和许多复选框的页面。该页面是在 asp.net 中生成的。每行都有一个复选框，标题中有一个复选框，并且在某些单元格中会有一组复选框(您会看到很多复选框)。

目前，这些复选框中的每一个都可以在其 onclick 事件中使用一点点 javascript 魔法正常工作。

所以你有类似的东西:

<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>

那就不足为奇了。

好的，问题来了:所以这很好用，但是我需要每个复选框来反射(reflect)其他复选框的状态。因此，例如:标题中的复选框会更改行复选框的值，更改行复选框会更改标题复选框等。

我知道你在想什么:调用那个 Javascript 函数很简单 highlightRow .但是，如果我这样做了，我将如何获得参数(好吧，this 很简单，但我到底在哪里可以得到 'AlternateRowStyle1'？)

所以我想问题是:我应该把这些参数放在哪里，这样我就可以通过 JS 以一种很好的跨浏览器方式获取它们。 ( <PossibleRedHerring> 尝试将自定义属性放在每个复选框上，但不确定这是正确的方法 </PossibleRedHerring> )，而且如果可以避免的话，我也希望不必继续回调服务器。

---

(顺便说一句，如果格式/写得有点糟糕，我很累!)

---

更新:好的，最后我设法避开了自定义属性，因为注意到复选框有层次结构。这意味着我能够触发子复选框的点击事件(这反过来会称之为 child 的点击事件等)幸运的是，在这种情况下，流程永远不会朝相反的方向发展，从而导致无限循环(有很多评论/指出这一点的文档!)

唯一有趣的是 IE 与 firefox、chrome 和 safari 中的点击事件之间的区别。 IE 允许点击任何东西，而其他浏览器将点击限制为按钮、复选框、单选按钮、重置或提交类型的输入元素。我有点想使用事件冒泡将点击事件附加到包含一组复选框的元素。

最后进行了一些修改:

// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
    if (element.click)
    {
        element.click();
    }
    else
    {
        // We don't have a click on this element, so add our own.
        var evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        element.dispatchEvent(evt);
    }
}

认为这可能会有所改进，但它现在可以解决问题。

还应该承认这是我第一次尝试正确的 javascript。这是一种有点可怕的语言(尤其是在访问 dom 时!)虽然很有趣，但我期待花一些时间进一步研究。

Answer 1

您可以使用 jquery 轻松完成此操作。您可以根据复选框的位置在复选框上定义一些自定义属性，并在单击时获取属性值并操作行的 css，以您想要的方式选中复选框。

这就是如何使用 jquery 为表格定义交替行颜色

$("table tr:nth-child(even)").addClass("striped");

<style>
.striped{
 background-color:#efefef;
}
</style>