title: How to add a name attribute to a dynamically generated <tr>
body: <p>I have been looking all around through numerous sources to try and find a way to add <code>name=""</code> to generated table rows. Here is the table part of the form being submitted.</p>
  
  <pre><code>&lt;table id="quote_form_table"border="1" style="border-collapse:collapse;border:1px solid #000000;width:100%" cellpadding="3" cellspacing="3"&gt;
      &lt;tr&gt;
          &lt;td&gt;Quantity&lt;/td&gt;
          &lt;td&gt;Item&lt;/td&gt;
          &lt;td&gt;Unit Price&lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr name="row[]"&gt;
           &lt;td&gt;&lt;input type="text" name="quantity" &gt;&lt;/td&gt;
           &lt;td&gt;
             &lt;select name="products"&gt;
                &lt;option&gt;Roller banner&lt;/option&gt;
                &lt;option&gt;Grasshopper&lt;/option&gt;
                &lt;option&gt;Pop up display&lt;/option&gt;
              &lt;/select&gt;
           &lt;/td&gt;
          &lt;td&gt;
            &lt;select name="type"&gt;
              &lt;option&gt;Roller banner&lt;/option&gt;
              &lt;option&gt;Grasshopper&lt;/option&gt;
              &lt;option&gt;Pop up display&lt;/option&gt;
            &lt;/select&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br&gt;
    &lt;button type="button"onclick="addrow()"&gt;Add Row&lt;/button&gt;
    &lt;button type="button"onclick="removerow()"&gt;Remove Row&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  </code></pre>
  
  <p>Here is the script adding and removing rows. </p>
  
  <pre><code>   &lt;script&gt;
      function addrow() {
          var table = document.getElementById("quote_form_table");
          var row = table.insertRow(-1);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          var cell3 = row.insertCell(2);
  
          cell1.innerHTML = '&lt;input type="text" name="quantity" &gt;';
          cell2.innerHTML = '&lt;select name="products"&gt;&lt;option&gt;Roller banner&lt;/option&gt;&lt;option&gt;GrassHopper&lt;/option&gt;&lt;option&gt;Pop up display&lt;/option&gt;&lt;/select&gt;';
          cell3.innerHTML = '&lt;select name="type"&gt;&lt;option&gt;Roller banner&lt;/option&gt;&lt;option&gt;GrassHopper&lt;/option&gt;&lt;option&gt;Pop up display&lt;/option&gt;&lt;/select&gt;';
  
      }
      function removerow() {
            document.getElementById("quote_form_table").deleteRow(-1);
      }
     &lt;/script&gt;
  </code></pre>
  
  <p>As a novice at Javascript ,(and I use the term 'novice' very loosely as it is not a language I am familiar with to fix this myself), I tried setAttribute to no avail.</p>
  
  <pre><code>var tr = tr.setAttribute("name", "row[]", 0);
  </code></pre>
  
  <p>I found many sources on how to add classes or Id's but none for 'name'. So as a wild stab in the dark I tried a last attempt to see if I could work it out.</p>
  
  <pre><code>row.name = "row[]";
  </code></pre>
  
  <p>So now here I am. </p>
  
  <p>The table rows are being made into arrays for PHP to process so that the information can be sent off in an email for price quotes and I can generate the information on the other end in the right order.</p>
  
  <p>My question is How do you add a <code>name="row[]"</code> to the dynamically generated tr tag? </p>
  
  <p>Is it even possible?</p>