jQuery: Building a new row with .click

Question

DEMO on jsFiddle http://jsfiddle.net/L48L88vm/3/

The current code only adds a cell when I need it to create a new row below "Attorney Review Received" to display the file chooser.

<table>

    <tr id="ARRrow">
        <td>Attorney Review Received:</td>
        <td><input id="ARR" type="button" value="Click me"></td>  
    </tr>
    <tr>
        <td>Full Package Sent to Title:</td>
    </tr>
</table>

JS:

  $("#ARR").click(function () {
      this.style.visibility='hidden';
      $("#ARRrow").each(function () {
          var tds = '</tr><tr><td>Attorney Review Results Document (PDF):</td><td><input         type="file" name="uploadFileName1" value="[+ $uploadFile +]" /></td><td><input type="submit" name="action" value="Upload Attorney Review Results"></td></tr>';  
          $(this).append(tds);
      });
  });

I tried to be clever and close the tr tag but that clearly isnt working right.

Your rows do not all have the same number of columns; you may have to use `colspan` attribute to balance. Secondly, you can not close an existing `tr`. Use `.closest()` and `.after()` to add your new row. — PeterKA, Sep 04 '14 at 22:22

Syed Ali Taqi · Answer 1 · 2014-09-04T22:27:55.080

0

Use $('table').append(tds);

$("#ARR").click(function () {
          this.style.visibility='hidden';
          $("#ARRrow").each(function () {
              var tds = '<tr><td>Attorney Review Results Document (PDF):</td><td><input         type="file" name="uploadFileName1" value="[+ $uploadFile +]" /></td><td><input type="submit" name="action" value="Upload Attorney Review Results"></td></tr>';  
              $('table').append(tds);
          });
      });

As you have no <tr> tag left closed so you don't need to write </tr> in the start.

UpdatedFiddle

edited Sep 04 '14 at 22:27

answered Sep 04 '14 at 22:22

Syed Ali Taqi

4,898
3
34
44

This is very close but this appends to the end of the table and I need it in the middle. @user3558931 got it right. – Iluvatar14 Sep 05 '14 at 14:12

PeterKA · Accepted Answer · 2014-09-04T22:32:18.133

DEMO

I have used colspan to balance your columns so your HTML looks organized. The styling is just to show that.:

<table>
    <tr id="ARRrow">
        <td colspan="2">Attorney Review Received:</td>
        <td><input id="ARR" type="button" value="Click me"></td>  
    </tr>
    <tr>
        <td colspan="3">Full Package Sent to Title:</td>
    </tr>
</table>

Then I have used .closest() and .after() to append the new row. And you do not need to use .each():

$("#ARR").click(function () {
    this.style.visibility='hidden';
    var tds = '<tr><td>Attorney Review Results Document (PDF):</td><td><input         type="file" name="uploadFileName1" value="[+ $uploadFile +]" /></td><td><input type="submit" name="action" value="Upload Attorney Review Results"></td></tr>';  
    $(this).closest('tr').after(tds);
});

jQuery: Building a new row with .click

2 Answers2