Add a column with rowspan to a table using jquery
<p>I have a 2 column by 6 row table which is generated by a framework, so I have no control over how the table is originally built.</p>

<p>I want to add a third column on the right that spans all 6 rows by using jQuery.  The table has an id, but the rows and cells have no defining features.</p>

<p>This is basically the generated table:</p>

<pre><code>&lt;table id="tbl1"&gt;
  &lt;tr&gt;
    &lt;td&gt;...&lt;/td&gt;
    &lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;...&lt;/td&gt;
    &lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  ...
&lt;/table&gt;
</code></pre>

<p>This is what I want it to be like after jquery has done its magic:</p>

<pre><code>&lt;table id="tbl1"&gt;
  &lt;tr&gt;
    &lt;td&gt;...&lt;/td&gt;
    &lt;td&gt;...&lt;/td&gt;
    &lt;td rowspan="6"&gt;some new data&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;...&lt;/td&gt;
    &lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  ...
&lt;/table&gt;
</code></pre>

<p>I'm using jQuery version 1.7.1</p>
