jquery - 需要一些关于表格 CSS 格式问题的建议

Question

我正在开发一款游戏，并使用表格作为表单，以便玩家填写一些信息。我正在使用 jQuery，这样当输入玩家数量后单击按钮时，每个名称都会出现一个新的文本框。问题是我希望这些输入字段出现在玩家数量输入框下方的行中，但是当我使用 .after jQuery 函数时，它们最终会直接进入表格的顶部。我想知道我可以通过在当前行的正下方创建行来添加到表中，或者除了我可以操作的输入表单的表之外，您是否有任何其他方法的输入？我已经附加了一些处理 .after 和表格的函数的代码，非常感谢您的输入! :)

<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

id 为“holder”的 div 导致了主要问题。我已经改进了您的代码及其工作方式，如您所期望的那样。

Here是相同的 jsfiddle

HTML 代码:

<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 代码:

  $('#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);
 }

编辑:

上面的代码和 Fiddle 已进行适当更新以支持动态行创建。