Выделите каждую строку при выборе нескольких строк

Question

Я использую этот код Jquery для выбора нескольких строк одновременно. Как видите, я попытался изменить цвет фона с помощью кода "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";

to & rarr;

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

ИЛИ

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

Ваша версия пытается установить цвет фона на флажок. Это невозможно. Вам необходимо выбрать родительский узел флажка.

Первая версия в моем решении будет нацелена на непосредственного родителя флажка. Это нормально использовать в вашем случае, если ваши <tr> только на один уровень глубиной. Однако, если ваши <tr> могут пойти глубже (то есть флажок может быть в <span>, который затем находится внутри <tr>), вам следует использовать вторую версию, которая ищет предков флажка для <tr> элемент, затем устанавливает его фон.