0

我用一个简单的列表结构制作了一个表格： 

<html>
    <body>
      <ul id="Column:0">
        <li id="Row:0></li>
        <li id="Row:1></li>
        <li id="Row:2></li>
        <li id="Row:3></li>
        <li id="Row:4></li>
      </ul>
      <ul id="Column:1">
        <li id="Row:0></li>
        <li id="Row:1></li>
        <li id="Row:2></li>
        <li id="Row:3></li>
        <li id="Row:4></li>
      </ul>
      <ul id="Column:2">
        <li id="Row:0></li>
        <li id="Row:1></li>
        <li id="Row:2></li>
        <li id="Row:3></li>
        <li id="Row:4></li>
      </ul>
    </body>
</html>

现在我想为每一行添加一个简单的 .mouseover()，例如在悬停时更改一行的颜色。到目前为止，这就是我想出的：

for (var i = 2;  i <= _totalRows; i++) {
    var row = $('#TimeTable ul li:nth-child(' + i + ')')
    row.each(function() {
        $(this).click(function(evt) {
            var $target = $(evt.target);
            console.log($target.nodeName)
            if (evt.target.nodeName == 'DIV') {
                console.log(evt.parent('li'));
            }
        }); //end $(this).click(fn)
    }); // end each(fn)
}

我得到一组<li>与 :nth-child(i) 匹配的所有对象，其中i是行号。

var row = $('#TimeTable ul li:nth-child(' + i + ')')

现在我只是迭代这个集合，为每个 .click(fn) 添加一个 .click(fn) <li>。这工作正常。每个单元格都有它的 .click(fn) 附加到它。但是，单击一下要做什么，是我现在被困了几个小时的地方：

var $target = $(evt.target);
console.log($target.nodeName)
if (evt.target.nodeName == 'DIV') {
    console.log(evt.parent('li'));
}

我根本不让它运行。你实际上可以忽略这个胡言乱语，因为它只是我已经在这里尝试过的几件事中的最后一个。

我想要做的只是选择每个<li>id='Row:X' 并操纵它的 CSS。我所拥有的最好的是，我可以单击一个单元格，但无论该单元格在哪一行，最后一个都会被着色。我记得i在发生这种情况时曾用作行索引，所以我可能也会在这里错过对事件处理的一些理解。

4

3 回答 3

2

对重复的元素组使用类名而不是 ID。如果你给第一行一个“Row1”类，选择器很简单：

$('.Row1')

然后：

$('#TimeTable li').removeClass('highlight');
$('.Row1').addClass('highlight');
于 2012-09-10T17:16:29.883 回答
0

如果您只想在鼠标悬停时更改颜色：

$('#TimeTable ul li').mouseover(function(){
    $(this).css('background','red');
});

$('#TimeTable ul li').mouseout(function(){
    $(this).css('background','green');
});
于 2012-09-10T17:14:46.717 回答
0

  1. 使您的 ID 像这样：C1R1 (Column1Row1) 等等

  2. JQuery 阅读/谷歌搜索“每个 jquery”

  3. JQuery 阅读/谷歌搜索“jquery 绑定点击”

  4. JQuery 读取/搜索“jquery attr”和“JQuery val()”

这将为您提供编写自己的知识，最重要的是更好地理解它。您将希望实现以下目标（您的关闭但不需要 for 循环）：

JQuery 将一个单击事件处理程序附加到每个 LI 的列表，然后当单击发生时，可以检索 ID。

PS。表格有时间和地点，它们在显示数据方面几乎总是比 CSS 好 9/10 倍。如果你有一个复杂的多列行并且想要固定的高度并且没有 JS 来修复事情或做任何聪明的事情，你可以有一个表格和 css ：悬停在 TR 上，以便将鼠标悬停在上面和外面等。高度也是恒定的。

PS。PS。如果您的数据是动态的并且来自数据库并且整行是来自数据库的 ID，我倾向于避免为此使用 html ID 属性并自己创建。您可以通过 attr("myattribute");

关于 CSS 和 IDS 的注意事项：ID 的标准做法将在页面上使用一次。可重复内容的类

祝你好运。

于 2012-09-10T17:16:20.797 回答