Question

另一个尝试：http://jsbin.com/wazeba/edit?js,console,output

另一个（来自此处的代码：https://stackoverflow.com/a/4785886/4412054）：http://jsbin.com/fuvoma/edit?js,console,output

在每种情况下，ID都是相同的。

我的 html ：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <br><br><br>

<button id="btnTest">Test many!</button>
<br><br><br>
<form id="formTest">

  <table>
    <thead>
    <tr>
      <th>Code</td>
    <th>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="anumber" id="anumber">
      </td>
      <td>
        <input type="text" name="name" id="name">
      </td>
    </tr>
  </tbody>
  </table>


</form>

<button type="button" id="btnAdd">Add</button>

</body>
</html>

和我的 Javascript ：

jQuery(document).ready(function() {

    jQuery("#btnTest").click(function() {
        for (var i = 0; i < 10; i++) {
            console.log("Test: " + i);
            jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
            jQuery('#btnAdd').click();
        }
    });


    jQuery("#btnAdd").click(function(e) {
        lastR = $("#formTest tbody tr").last();
        jQuery(lastR).clone().appendTo('#formTest tbody');
      readFnc(lastR);
    });

    function readFnc(lastR) {
      rowCode = $(lastR).find("input[name='anumber']");
      rowName = $(lastR).find("input[name='name']");
      var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {
       })
      .fail( function() {
        console.log("Error");
      })
      .done( function(data) {
        console.log("Goo!");
        rowCode.val(data.code);
        rowName.val(data.name);
        $(lastR).css({"background-color": "#99ff99"});
      });
    }

});

现在我需要使用每个getJSON的不同值更新每一行。如何管理许多ajax调用或更抽象的许多函数？

我需要在服务器转发时更新表单。就在那时。

如果我为每个tr分配一个ID，那么在每个“Add”上单击，函数变量将被覆盖。怎么办？

Answer 1

getJSON是异步的，因此脚本创建10行，然后它解析getJSOn promise，使用last（）选择器将值仅分配给创建的最后一行。要避免此问题，可以将克隆的对象传递给函数。只是为了解释，您可以看到callOrder和resolveOrder的顺序不同。

  var callORder = 0;

  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

jQuery(document).ready(function() {

  jQuery("#btnTest").click(function() {
    for (var i = 0; i < 10; i++) {
      console.log("Test: " + i);
      jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
      jQuery('#btnAdd').click();
    }
  });

  var callORder = 0;
  
  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

});

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <br>
  <br>
  <br>

  <button id="btnTest">Test many!</button>
  <br>
  <br>
  <br>
  <form id="formTest">

    <table>
      <thead>
        <tr>
          <th>Code</td>
            <th>Name</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" name="anumber" id="anumber">
          </td>
          <td>
            <input type="text" name="name" id="name">
          </td>
        </tr>
      </tbody>
    </table>


  </form>

  <button type="button" id="btnAdd">Add</button>

</body>

</html>

jQuery很多行的很多功能，如何管理？

1 个答案: