jQuery: renumber all rows by changing first column's values
<p>I'm trying to renumber my rows, starting with a given start index, after an event.  Here's the HTML for my table:</p>

<pre><code>&lt;table id="table4"&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;span class='col1'&gt;6&lt;/span&gt;&lt;/td&gt;
        &lt;td&gt;Score&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I add rows in later with jQuery with the same format (the first column cell will always have the <code>&lt;span class='col1'&gt;&lt;/span&gt;</code> tag).</p>

<p>I'm trying this with a css selector, but its not working (nothing is getting changed):</p>

<pre><code>var startIndex = 6; 
$("span .col1").text($(this).closest("tr").index() + startIndex);
</code></pre>

<p>Is this the right way to do this?  I'm kind of a jQuery noob.  If there is a better way to do this, I'm more than happy to consider changing my code structure.</p>
