Question

我用一个简单的列表结构创建了一个表：

<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 + ')')

现在我只是将其设置为向每个<li>添加.click（fn）。这很好用。每个单元格都附加了.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作为行索引，当发生这种情况时，我也可能会错过对事件处理的一些理解。

Answer 1

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

$('.Row1')

然后：

$('#TimeTable li').removeClass('highlight');
$('.Row1').addClass('highlight');

Answer 2

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

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

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

Answer 3

使您的ID如下：C1R1（Column1Row1）等等
JQuery阅读/ google up“jquery each”
JQuery read / google up“jquery bind click”
JQuery read / google up“jquery attr”和“JQuery val（）”

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

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

PS。桌子有时间和地点，它们比CSS显示数据几乎总是好9/10倍。如果你有一个复杂的多列行并且想要fiexed hights并且没有JS可以解决问题或做任何聪明的事情你可以有一个表和css：将鼠标悬停在TR上以便将鼠标放在一边等等。高度也是不变的。

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

关于CSS和IDS的说明： ID的标准做法是在页面上使用一次。可重复内容的类

表格由列表（<ul>，<li>）组成，如何选择一行？（：第n个孩子（））？</LI> </UL>

3 个答案:

表格由列表（<ul>，<li>）组成，如何选择一行？ （：第n个孩子（））？</LI> </UL>

3 个答案:

表格由列表（<ul>，<li>）组成，如何选择一行？（：第n个孩子（））？</LI> </UL>