1

我正在开发一个应用程序，用于为从 json 数据生成的值选择 PASS/FAIL 选项。

我的问题是我无法为每行选择值。所选值适用于所有行。

HTML：

<table id="records" cellspacing="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 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

2

工作小提琴

首先，您只需将相同的名称添加到要为每一行关联（通过和失败）的两个单选按钮

像这样的东西：

"<td><input type='radio' value='Pass' name='PASS" + i + "'/>PASS</td>"+
"<td><input type='radio' value='Fail' name='PASS" + i + "'/>FAIL</td>";

然后使用类型而不是名称将更改处理程序分配给单选按钮

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

并到达父 tr 并从那里查找 input[type=text]

$(this).parent().parent().find('input[type=text]').val($(this).val());
于 2013-10-31T18:22:38.307 回答
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 回答
0

工作演示

尝试这个，

问题是因为您已指定$('input[type="text"]')它将选择所有文本类型的输入，因此所有文本框的值都会受到影响，但是下面的代码会在单击的单选按钮的同一行中获取相应的文本框。

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

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

});

希望这会有所帮助，谢谢

于 2013-10-31T18:18:56.637 回答
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 回答