Highlight each row when selecting multiple rows

I'm using the this Jquery code to select multiple rows at once. As you see I tried changing the background color with the code "lastChecked.style.background = "yellow";" but it's not working. How do I do this?

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;
        });
});

Here's all of the code used:

{% extends "base.html" %}
{% block title %}Most Common Calls | CPRS Help{% endblock %}
{% block script %}
<script type="text/javascript">
/*<![CDATA[*/
function highlight_row(row_id,chec开发者_运维技巧kbox)
{
  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 %}

UPDATED SOLUTION:

Ok, now that your issue is more clear, here is the correct solution:

If you want the rows to have a background color when selecting using the shift key, you need to change this line:

lastChecked.style.background = "yellow";

 to →

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

                   OR

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

Your version tries to set the background color on the checkbox. This is impossible. You need to select the checkbox's parent Node.

The first version in my solution will target the checkbox's immediate parent. This is ok to use in your case if your <tr>'s only go one level deep. If, however, your <tr>'s can go deeper (i.e. a checkbox might be in a <span> which is then inside the <tr>) you should use the second version, which searches the checkbox's ancestors for a <tr> element, then sets its background.