Javascript 选定行具有悬停状态

我在

看起来是这样的：！ 在小提琴中：

现在我要做的是：

• 行具有悬停状态
• 可以在不选中复选框的情况下选择行
• 可以选择多行

任何帮助都非常感谢高级

试试这个

此代码可能会帮助您=>在tr上单击复选框，如果选中，则取消选中，否则选中

对于tr悬停效果，您可以编写css

$（'table tr'）。单击（函数（）{
if（！$（event.target）.is（“：复选框”））
{
if（$（this）.find（'[type=“checkbox”]'）是（':checked'））{
$（this）.find（'[type=“checkbox”]'）.prop（'checked'，false）
$（this.removeAttr（'style'）；
}
否则{
$（this）.find（'[type=“checkbox”]'）.prop（'checked'，true）
$（this.css（'background'，'yellow'）；
}
}
})
表tr：悬停{
背景：黄色；
}

试试这个

此代码可能会帮助您=>在tr上单击复选框，如果选中，则取消选中，否则选中

对于tr悬停效果，您可以编写css

$（'table tr'）。单击（函数（）{
if（！$（event.target）.is（“：复选框”））
{
if（$（this）.find（'[type=“checkbox”]'）是（':checked'））{
$（this）.find（'[type=“checkbox”]'）.prop（'checked'，false）
$（this.removeAttr（'style'）；
}
否则{
$（this）.find（'[type=“checkbox”]'）.prop（'checked'，true）
$（this.css（'background'，'yellow'）；
}
}
})
表tr：悬停{
背景：黄色；
}

可单击行：

$('table').on('click', 'tr', function() {
    var $row = $(this);
    var $checkbox = $row.find('[type=checkbox]');
    $checkbox.click();
});

tr:hover {
    background-color: grey;
}

可悬停行：

$('table').on('click', 'tr', function() {
    var $row = $(this);
    var $checkbox = $row.find('[type=checkbox]');
    $checkbox.click();
});

tr:hover {
    background-color: grey;
}

启用状态：

$('table').on('click', '[type=checkbox]', function(e) {
    var $checkbox = $(this);
    var $row = $checkbox.parents('tr');
    e.stopPropagation(); // Prevents the other click handler from being called
    if($checkbox.prop('checked')) {
        $row.addClass('checked');
    } else {
        $row.removeClass('checked');
    }
});

启用状态CSS：

tr.checked {
    background-color: cyan;
}

显然，这需要更多的工作——例如突出显示在HTML中启用了复选框的行。但您可以了解要点。

可单击行：

$('table').on('click', 'tr', function() {
    var $row = $(this);
    var $checkbox = $row.find('[type=checkbox]');
    $checkbox.click();
});

tr:hover {
    background-color: grey;
}

可悬停行：

$('table').on('click', 'tr', function() {
    var $row = $(this);
    var $checkbox = $row.find('[type=checkbox]');
    $checkbox.click();
});

tr:hover {
    background-color: grey;
}

启用状态：

$('table').on('click', '[type=checkbox]', function(e) {
    var $checkbox = $(this);
    var $row = $checkbox.parents('tr');
    e.stopPropagation(); // Prevents the other click handler from being called
    if($checkbox.prop('checked')) {
        $row.addClass('checked');
    } else {
        $row.removeClass('checked');
    }
});

启用状态CSS：

tr.checked {
    background-color: cyan;
}

---

---

显然，这需要更多的工作——例如突出显示在HTML中启用了复选框的行。但是你知道要点。

你的JavaScript在哪里？你的问题是什么？你是说progressbar？这是来自jQuery UI@Zenith的“可以选择不带复选框的行”-您应该在单击行时激活复选框，使用jQuery会更容易@Zenith在这里~：）你的JavaScript在哪里？你的问题是什么？你是说progressbar？这是来自jQuery UI@Zenith的“可以选择不带复选框的行”-您应该在单击行时激活复选框，使用jQuery会更容易@Zenith在这里~：）但复选框现在不起作用，对吗？对于hover，我在css中使用了

tr:hover{background:#FCF；}

。。虽然我想要的是可以选择行，但不能选中复选框，但选中行时会显示悬停状态。。。这是新的：@sangram parmarYou真棒..非常感谢@sangram Parmar但复选框现在不起作用，对吗？对于hover，我在css中使用了

tr:hover{background:#FCF；}

。。虽然我想要的是可以选择行，但不能选中复选框，但选中行时会显示悬停状态。。。这是新的：@sangram parmarYou真棒..非常感谢@sangram parmarYh.还是谢谢你。：）这是第二种方法..和第一种一样酷..但它有点难理解@鲁道夫Gottesheim@Sunny我认为这是更好的代码，因为我并没有通过JavaScript设置CSS属性。但你肯定是对的，另一个答案更容易阅读和理解，你可以或多或少地把它放进去。：）真正地所以我们应该避免通过JavaScript设置CSS属性？嗯@鲁道夫Gottesheim@Sunny通过JS设置和删除类名，并应用样式本身，就可以分离关注点。JavaScript（或者DOM）本身不应该与页面的外观有任何关系。类名是实现这一点的桥梁。您不必转到JavaScript代码来更改活动行的外观。CSS就是为此而设计的。DougNeiner在维也纳的上一次jQuery会议上谈到了这一点。这是第二种方法。和第一种方法一样酷。但是它有点难理解@鲁道夫Gottesheim@Sunny我认为这是更好的代码，因为我并没有通过JavaScript设置CSS属性。但你肯定是对的，另一个答案更容易阅读和理解，你可以或多或少地把它放进去。：）真正地所以我们应该避免通过JavaScript设置CSS属性？嗯@鲁道夫Gottesheim@Sunny通过JS设置和删除类名，并应用样式本身，就可以分离关注点。JavaScript（或者DOM）本身不应该与页面的外观有任何关系。类名是实现这一点的桥梁。您不必转到JavaScript代码来更改活动行的外观。CSS就是为此而设计的。DougNeiner在维也纳的上一次jQuery会议上谈到了这一点。他也写过这件事。