jquery - Need some suggestions on some CSS formatting issue with table

Question

I'm working on a game and am using a table as a form in order for the player to fill out some information. I am using jQuery so that when the button is clicked after the number of players is input, a new text box appears for each name. The issue is I'd like these input fields to appear in rows below the number of players input box, but when I use the .after jQuery function they end up going straight to the top of my table. I was wondering what I could do to add to the table by creating rows right underneath the current ones, or if you have any input on a method other than a table for an input form which I can manipulate, a lot? I've attached some of my code, for the functions that deal with .after and the table, your input is much appreciated! :)

<div class=form>
    <table>
    <tr>
    <td>Gender:</td>
    <td><form>
        <input type="text" name="genderItem"/>
        </form>
    </td>
    <td>
        <div class ="button" id="button1">Add!</div>
    </td>
    </tr>
    <tr>
    <td>Number of charcters:</td>  
    <td><form>
        <input type="text" name="charcItem"/>
        </form>
    </td>
    <td> <div class="button" id="button2">Add!</div> </td>
    </tr>
    <div id="holder"></div>
    </table>

$('#button2').click(function(){
names=$('input[name=charcItem]').val();
nameRecording(names);
});    
function nameRecording(names){
    for(var i =1; i<=names; i++)
        $('#holder').after('<tr><td>Name one:</td><td><form><input type="text" name="charcItem"/></form></td></tr>');

};    

Answer 1

the div with id 'holder' was causing the major problem. I have refined your code and its working as you expected.

Here is the jsfiddle for the same

HTML CODE:

<div class=form>
<table >
<tr>
<td>Gender:</td>
<td><form>
    <input type="text" name="genderItem"/>
    </form>
</td>
<td>
    <div class ="button" id="button1">Add!</div>
</td>
</tr>
<tr>
<td>Number of charcters:</td>  
<td><form>
    <input type="text" name="charcItem"/>
    </form>
</td>
<td> <div class="button" id="button2">Add!</div> </td>
</tr>

</table>

JS CODE:

  $('#button2').click(function () {
  names = $('input[name=charcItem]').val();
  removeRows();
  nameRecording(names, $(this));

});

function removeRows() {
  $('#newRows').remove();
}

function nameRecording(names, $this) {
  var addRows = '<tr id=newRows>';
  for (var i = 1; i <= names; i++) {
    var nearTr = $this.closest('tr');
    addRows = addRows + '<td>Name one:</td><td><form><input type="text" name="charcItem"/></form></td>';
  }
 addRows = addRows + '</tr>';
 nearTr.after(addRows);
 }

EDIT:

The above code and Fiddle has been updated appropriately to support dynamic row creation.

Answer 2

Placing a DIV element inside a TABLE element is a bad idea. You should either put the DIV inside a TD or TH element.

Better yet, you should ignore the div entirely, and insert your rows after another row.

$("#button2").parent().after('<tr><td>Name one:</td><td><form><input type="text" name="charcItem"/></form></td></tr>');

Answer 3

You could probably try

$('<tr><td>Name one:</td><td><form><input type="text" name="charcItem"/></form></td></tr>').insertAfter($('.form table tr:last');

Answer 4

Good old tables <3

It would be a lot easier to just do the markup with divs. Something like this:

<div class="form">
    <div class="form_container">
        <div class="text_field">
            Gender
        </div>
        <div class="input_field">
            <input type="text" name="genderItem" />
        </div>
    </div>
    <div class="form_add_container">
        <input type="button" name="button" id="add_button1" value="Add" />
    </div>
</div>

This may require some more markup and styling, but it should be no problem to float the elements and wrap them in their containers.

Then the js-code could be something like this:

$('#add_button1').on('click',function () {
    $('.form_container').append('<div class="text_field">Gender</div><div class="input_field"><input type="text" name="genderItem" /></div>');
});