5

私がやりたいことはこれです：ユーザーが送信をクリックすると、データが<tr/>（各フィールドが独自にネストされた状態で<td/>）表示されるようにします。

実際にこれを行うスクリプトを既に作成しましたが、システムはまだ動的ではありません。

HTML :

<form name="contact" method="post" action="">
    <p>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" />
    </p>
    <p>
        <label for="age">Age</label>
        <input type="text" name="age" id="age" />
    </p>
    <p>
        <label for="mail">Mail</label>
        <input type="text" name="mail" id="mail" />
    </p>
    <p>
        <input type="submit" name="submit" id="submit" value="Send" />
    </p>
</form>
<table id="results"></table>

JS:

$(function() {
    $("#submit").click(function() {

        var name = $("input#name").val();
        var age = $("input#age").val();
        var mail = $("input#mail").val();

        var dataString = [name, age, mail];
        var n = dataString.length;

        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function() {
                $('#results').append(
                    $('<tr>')
                        .append($('<td>').append(dataString[0]))
                        .append($('<td>').append(dataString[1]))
                        .append($('<td>').append(dataString[2]))
                );
            }
        });
        return false;
    });
})

ご覧のとおり、 を使用してフィールドを手動で取得してdataString[x]いますが、このシステムを動的にするにはどうすればよいでしょうか?

次のようなループを使用することを考えていましたが、機能させることができないようです:

for(var i = 0; i < n; i++){
    row += "$('<td>').append("+dataString[i]+")";
}

$('#results').append(
    $('<tr>')
        .append(row)
);

これを行う方法に関するヒントはありますか？または、よりクリーンなソリューションがありますか？

4

3 に答える 3

8

このコード行:

row += "$('<td>').append("+dataString[i]+")";

要素を作成してそれにデータを追加するのではなく、row変数と文字列リテラル (jQuery コードを含む) を連結するだけです。

行の内容を含む文字列ではなくrow、実際の行を作成してから、success代わりにそれをコールバック ハンドラに追加してください。

var row = $('<tr>');
for(var i = 0; i < n; i++) {
    row.append($('<td>').html(dataString[i]));
}

それで：

$('#results').append(row);
于 2012-06-28T10:30:32.917 に答える
0

これを試してみてください、それは間違いなくうまくいきます。

var str ='<tr>';
$.each(dataString, function(i){
    str += '<td>' + this + '<td>';
}
$('#results').append(str + '</tr>');
于 2012-06-28T10:56:26.417 に答える
0 
var row = '<tr>';
var col = '';
for(var i=0;i<dataString.length;i++)
    col += '<td>'+dataString[i]+'</td>';
row += '</tr>';
$('#results').append(row);
于 2012-06-28T10:39:53.497 に答える