1

json データから生成された値の PASS/FAIL オプションを選択するアプリケーションを開発しています。

私の問題は、行ごとに値を選択できないことです。選択した値はすべての行に適用されます。

HTML:

<table id="records" cellspacing="0">

Jクエリ:

(function () {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON(url, {
        'rows': 5,
            'fname': '{firstName}',
            'lname': '{lastName}',
            'tel': '{phone|format}',
    })
        .done(function (data) {
        $.ajaxSetup({
            cache: false
        });
        var t;
        $.each(data, function (i, item) {
            var html =
                "<td>" + item.fname + "</td>" +
                "<td>" + item.lname + "</td>" +
                "<td>" + item.tel + "</td>" +
                "<td><input type='text' name='PASS' placeholder='" + i + "' /></td>" +
                "<td><input type='radio' value='Pass' name='PASS'/>PASS</td>" +
                "<td><input type='radio' value='Fail' name='PASS'/>FAIL</td>";
            $("<tr/> </table>").html(html).appendTo("#records");

        });
        $('input[name="PASS"]').on('change', function () {

            $('input[type="text"]').val($(this).val());

        });
    });
})();

JSFIDDLE: http://jsfiddle.net/rutvij111/hUAWF/

4

4 に答える 4

0

これは最適な解決策ではありませんが、機能しています

    (function() {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON( url, {
        'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
      })
      .done(function( data ) {
           $.ajaxSetup ({ cache: false});
               var t;
        $.each( data, function( i, item ) {
    var html = 
        "<td>" + item.fname + "</td>" +
        "<td>" + item.lname + "</td>" +
        "<td>" + item.tel + "</td>" +
        "<td><input id="+i+" type='text' name='PASS' placeholder='"+i+"' /></td>" +
        "<td><input id="+i+" type='radio' value='Pass' name='PASS'/>PASS</td>"+
        "<td><input id="+i+" type='radio' value='Fail' name='PASS'/>FAIL</td>";
      $("<tr/> </table>").html(html).appendTo("#records");

});
  $('input[name="PASS"]').on('change', function() {

      var id=  $(this).attr('id');
        $('input[type="text"]#'+id).val($(this).val());

    });
      });
    })();
于 2013-10-31T18:27:42.940 に答える
0

name="PASS"これは、すべてのラジオ ボタンに同じものを割り当てるためです。行ごとに異なるものを選択する必要があります。などのように番号を付けることができますname = "PASS1"。推奨される方法のデモ:

http://jsfiddle.net/hUAWF/7/

または、その行の子を選択することにより、データを表示するためだけに（そしてデータを書き込むためではない）単一の行のみを更新できます。

$('input[name="PASS"]').
  on('change', function() {
    $(this).
      parents("tr").
      find('input[type="text"]').
      val($(this).val());

簡単な代替のデモ:

http://jsfiddle.net/hUAWF/4/

于 2013-10-31T18:18:32.000 に答える