2

私はゲームに取り組んでおり、プレーヤーが情報を入力するためにテーブルをフォームとして使用しています。jQuery を使用して、プレイヤーの数を入力した後にボタンをクリックすると、名前ごとに新しいテキスト ボックスが表示されるようにしています。問題は、これらの入力フィールドをプレイヤー数入力ボックスの下の行に表示したいのですが、.afterjQuery 関数を使用すると、テーブルの一番上に直接移動してしまうことです。現在の行のすぐ下に行を作成してテーブルに追加するにはどうすればよいのか、または操作できる入力フォームのテーブル以外のメソッドに入力がある場合はどうすればよいのかと思っていました。.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>');

};
4

4 に答える 4

1

ID「ホルダー」のdivが大きな問題を引き起こしていました。私はあなたのコードを改良し、期待どおりに動作しました。

ここに同じの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 は、動的な行の作成をサポートするために適切に更新されています。

于 2013-07-09T13:08:42.280 に答える
0

DIV要素の中に要素を配置するのTABLEは悪い考えです。または要素のDIV内側に配置する必要があります。TDTH

さらに良いことに、div を完全に無視して、別の行の後に行を挿入する必要があります。

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

于 2013-07-09T12:59:32.457 に答える
0

あなたはおそらく試すことができます

$('<tr><td>Name one:</td><td><form><input type="text" name="charcItem"/></form></td></tr>').insertAfter($('.form table tr:last');
于 2013-07-09T13:03:07.350 に答える
0

古き良きテーブル <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>');
});
于 2013-07-09T13:46:36.860 に答える