Question

有点背景： 我有一个包含表格和许多复选框的页面。该页面在asp.net中生成。每行都有一个复选框，标题中有一个复选框，在某些单元格中会有一组复选框（你可以看到很多复选框）。

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

所以你有类似的东西：

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

那时并不令人感到意外。

好的，这就是问题所在： 所以这工作正常但是我需要每个复选框来反映其他复选框的状态。例如：标题中的复选框会更改行复选框的值，对行复选框可以更改标题复选框等。

我知道你在想什么：只需调用Javascript函数highlightRow即可。但是，如果我这样做，我将如何得到参数（好this很容易，但我在哪里可以得到'AlternateRowStyle1'？）

所以我想问题是：我在哪里放置这些参数，以便我可以用一个很好的跨浏览器方式来获取它们。（<PossibleRedHerring>尝试在每个复选框上添加自定义属性，但不确定这是正确的方法</PossibleRedHerring>），我也不想继续回调服务器，如果这样的话可以避免的。

（对不起，如果格式/写得有点糟糕，我会非常累！）

更新好吧最后我设法躲避自定义属性，因为注意到复选框有一个层次结构。这意味着我能够触发子复选框的click事件（其中就会将其称为儿童的点击事件等），幸运的是，在这种情况下，流程将永远不会出现相反的方向导致无限循环（有很多评论） /文件指出这一点！）

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

最后还有一点黑客攻击：

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

我认为自定义属性确实是您的解决方案，看不出任何问题。虽然我会把类似替代行样式的东西作为行的属性，而不是作为复选框的属性。

Answer 2

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

这就是如何使用jquery

为表定义备用行颜色

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

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

Answer 3

如果我理解正确的话;你希望能够在标题上点击并检查同一行中的所有复选框吗？

我会为“th”元素设置一个cssclass，并在每个“td”元素上使用相同的类。

我会将交替的类放在每个第二个“tr”元素上。这样，如果它是交替项目，你可以采用不同的风格。

我也会使用jQuery轻松创建js代码。

我不会添加自定义属性，因为......你不能只添加自己的虚构属性，这就是为什么我们有html标准。

连接javascript事件和传递参数

3 个答案: