title: Using Javascript or Jquery to dynamically create incrementing id for table as each row is created
body: <p>I would like for a user to click an image in this table which is created dynamically based on the JSON data sent from the web service, and have the image change. When clicking the image again it will change back to the first image (inter-changing between only two images).</p>
  
  <p>I have a table being created via jQuery's <code>$.ajax()</code> function which looks like this:</p>
  
  <pre><code>&lt;table border="0" width=80% id="table"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                    &lt;td&gt;&lt;h3&gt;Check to Renew&lt;/h3&gt;&lt;/td&gt;
                    &lt;td width=40%&gt;&lt;h3&gt;Vendor Part&lt;/h3&gt;&lt;/td&gt;
                    &lt;td width=100%&gt;&lt;h3&gt;Part Description&lt;/h3&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;h3&gt;Unit Price&lt;/h3&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;h3&gt;Quantity&lt;/h3&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr class="template"&gt;
                    &lt;td&gt;&lt;img src="images/checkmark.png" alt="check" id="row1" onclick=""&gt;&lt;/td&gt;
                    &lt;td&gt;$vendorPart&lt;/td&gt;
                    &lt;td&gt;$partDescription&lt;/td&gt;
                    &lt;td&gt;$price&lt;/td&gt;
                    &lt;td&gt;&lt;input class="quantityClass" name="quantity" value="$quantity"/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Here is the simple Javascript function which changes the images:</p>
  
  <pre><code>renewimg=Array("images/checkmark.png","images/gray_x.png");
  function rowImageRefresh(y)
  {
      document.getElementById(y).src=renewimg[++m];
      if (m==1)
      {m=-1;}
  }
  </code></pre>
  
  <p>This Javascript function work's beautifully, however only if I pass it the images id (in this case specific to the row). Hard coding for testing purposes proved this. My issue is I would like to be able to create a row id on the fly as the table row is created and then have functionality where that id can be passed.</p>
  
  <p>I guess if I were to illustrate this more it would look something like this:</p>
  
  <pre><code>JavaScript: var row = 1;
  
  HTML:
  //table data
  
  &lt;td&gt;&lt;img src="images/checkmark.png" alt="check" id="row+[i];i++;" onclick="rowImageRefresh(this.row.id)"&gt;&lt;/td&gt;
  //more table data
  </code></pre>
  
  <p>Where the id is created dynamically on the fly as each row is created and the onclick function passes the row of the image clicked.</p>