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 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);
 }

修改

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

Answer 2

在DIV元素中放置TABLE元素是个坏主意。您应该将DIV放在TD或TH元素中。

更好的是，你应该完全忽略div，然后在另一行之后插入你的行。

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

Answer 3

你可能会尝试

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

Answer 4

好旧表＆lt; 3

使用div进行标记会更容易。像这样：

<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>

这可能需要更多的标记和样式，但浮动元素并将它们包装在容器中应该没有问题。

然后js代码可能是这样的：

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

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

4 个答案: