选择多行时突出显示每一行

Question

我正在使用这个 Jquery 代码 select 一次多行。 如您所见，我尝试使用代码“lastChecked.style.background = “yellow”;”更改背景颜色但它不起作用。 我该怎么做呢？

var lastChecked = null;

$(document).ready(function() {
        $('.chkbox').click(function(event) {
                if(!lastChecked) {
                        lastChecked = this;
                        return;
                }

                if(event.shiftKey) {
                    var start = $('.chkbox').index(this);
                    var end = $('.chkbox').index(lastChecked);

                    for(i=Math.min(start,end);i<=Math.max(start,end);i++) {
                                $('.chkbox')[i].checked = lastChecked.checked;
                                lastChecked.style.background = "yellow";
                        }
                }

                lastChecked = this;
        });
});

以下是使用的所有代码：

{% extends "base.html" %}
{% block title %}Most Common Calls | CPRS Help{% endblock %}
{% block script %}
<script type="text/javascript">
/*<![CDATA[*/
function highlight_row(row_id,checkbox)
{
  var row = document.getElementById(row_id);
  row.style.background = checkbox.checked ? "yellow" : ""; 
}

function unhighlight_row(row_id)
{
  var row = document.getElementById(row_id);
  row.style.background = "white"; // background yellow
}
/*]]>*/
</script>
{% endblock %}
{% block content %}
<h2>Most Common Calls</h2>
<form action="/mark_as_uninteresting/" method="post">
{% csrf_token %}
<table class="calls">
<tr><th style="width:30px">N</th><th>Word</th><th style="width:150px;"><input class="searchbutton" type="submit" value="Mark as Uninteresting" /></th></tr>
{% for word in word_frequencies %}
<tr id="row_{{ forloop.counter }}"><td>{{ word.n }}</td><td style="padding:0;"><a href="/search/?q={{ word.word }}" style="padding:5px;display:block;color:blue;">{{ word.word }}</a></td><td style="text-align:center"><input type="checkbox" name="checkbox_{{ word.id }}" onclick="highlight_row('row_{{ forloop.counter }}',this)" id="id_chk{{ forloop.counter }}" class="chkbox" /></td></tr>
{% endfor %}
</table>
</form>
<script type="text/javascript" src="/media/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
    var lastChecked = null;

    $(document).ready(function() {

            $('.chkbox').click(function(event) {
                    if(!lastChecked) {
                            lastChecked = this;
                            return;
                    }

                    if(event.shiftKey) {
                        var start = $('.chkbox').index(this);
                        var end = $('.chkbox').index(lastChecked);

                        for(i=Math.min(start,end);i<=Math.max(start,end);i++) {
                                    $('.chkbox')[i].checked = lastChecked.checked;
                            }
                    }

                    lastChecked = this;
            });
    });
</script>
{% endblock %}

Answer 1

更新的解决方案：

好的，现在您的问题更清楚了，这是正确的解决方案：

如果您希望在使用 shift 键选择时行具有背景颜色，则需要更改此行：

lastChecked.style.background = "yellow";

到 →

$('.chkbox')[i].parentNode.style.backgroundColor='yellow';

或者

$('.chkbox').eq(i).parents('tr').style.backgroundColor='yellow';

您的版本尝试在复选框上设置背景颜色。 这是不可能的。 您需要 select 复选框的父节点。

我的解决方案中的第一个版本将针对复选框的直接父级。 如果您的<tr>只有 go 一层深，则可以在您的情况下使用。 但是，如果您的<tr>可以 go 更深（即复选框可能在<span>中，然后在<tr>内），您应该使用第二个版本，该版本在复选框的祖先中搜索<tr>元素，然后设置其背景。