Question

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

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

HTML：

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

JQUERY：

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

Answer 1

working fiddle

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

类似的东西：

"<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并从那里查找输入[type = text]

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

Answer 2

那是因为你为每个单选按钮分配了相同的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/

Answer 3

工作DEMO

试试这个，

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

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

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

});

希望这有帮助，谢谢

Answer 4

这不是最佳解决方案，但它正在运作

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

    });
      });
    })();

从json数据动态生成单选按钮

4 个答案:

工作DEMO