迭代并在现有表中显示json数据-jQuery

Question

我正在获取要迭代的jsonData并显示在table2中，通过单击提交按钮时隐藏table1可以显示出table2 .table2有很多行（6行），但是我得到的jsonData有我要迭代并在table2的前3行中显示的3行，而table2中的其余行为空，因为我们在jsonData中仅获得3行信息。

示例演示：http://plnkr.co/edit/OewuCrobeM2cznRgL5Lo?p=preview

示例js代码：

function submitData(){
   var flag = true;
   if(flag){
     //after getting the values from backend hide the table1 and show table2
     $("#table1").hide();
      $("#table2").show();
     var jsonData = [{"sid":"1023","spread":"3","loanType":"auto","comments":"Loan Approved"},
     {"sid":"1024","spread":"4","loanType":"car","comments":"Loan Approved"},
     {"sid":"1025","spread":"3","loanType":"auto","comments":"Loan Denied"}]

  //iterate and show the jsonData in the table2 which is shown after user click on submit button and hide the table1 and show table2
   } 
 }

示例html代码：

<table id="table1" border="1"> 

    <tr>
        <th>SID</th>
        <th>spread%</th>
        <th>LoanType</th>
         <th>Comments</th>
    </tr>

    <tr>
         <td><input type="text" name="sid" id="sid1" value="100"></td>
         <td><input type="text" name="spread" id="spread1" value="6"></td>
         <td><input type="text" name="loanType" id="loanType1" value="Auto"></td>
         <td><input type="text" name="comments" id="comments1" value="autoLoan"></td>
     </tr> 
        <tr>
         <td><input type="text" name="sid" id="sid2" value="200"></td>
         <td><input type="text" name="spread" id="spread2" value="7"></td>
         <td><input type="text" name="loanType" id="loanType2" value="Car"></td>
         <td><input type="text" name="comments" id="comments2" value="carLoan"></td>
     </tr> 
      <tr>
         <td><input type="text" name="sid" id="sid3" value="300"></td>
         <td><input type="text" name="spread" id="spread3" value="6"></td>
         <td><input type="text" name="loanType" id="loanType3" value="Auto"></td>
         <td><input type="text" name="comments" id="comments3" value="autoLoan"></td>
     </tr> 
</table> 

<table id="table2" border="1" style="display:none">

    <tr>
        <th>SIDTable2</th>
        <th>spread% Table2</th>
        <th>LoanType Table2</th>
         <th>Comments Table2</th> 
    </tr>

    <tr>
         <td><input type="text" name="sid" id="sid1" value=""></td>
         <td><input type="text" name="spread" id="spread1" value=""></td>
         <td><input type="text" name="loanType" id="loanType1" value=""></td>
         <td><input type="text" name="comments" id="comments1" value=""></td>
     </tr>
         <tr>
         <td><input type="text" name="sid" id="sid2" value=""></td>
         <td><input type="text" name="spread" id="spread2" value=""></td>
         <td><input type="text" name="loanType" id="loanType2" value=""></td>
         <td><input type="text" name="comments" id="comments2" value=""></td>
     </tr> 
         <tr>
         <td><input type="text" name="sid" id="sid3" value=""></td>
         <td><input type="text" name="spread" id="spread3" value=""></td>
         <td><input type="text" name="loanType" id="loanType3" value=""></td>
         <td><input type="text" name="comments" id="comments31" value=""></td>
     </tr> 
         <tr>
         <td><input type="text" name="sid" id="sid4" value=""></td>
         <td><input type="text" name="spread" id="spread4" value=""></td>
         <td><input type="text" name="loanType" id="loanType4" value=""></td>
         <td><input type="text" name="comments" id="comments4" value=""></td>
     </tr> 
         <tr>
         <td><input type="text" name="sid" id="sid5" value=""></td>
         <td><input type="text" name="spread" id="spread5" value=""></td>
         <td><input type="text" name="loanType" id="loanType5" value=""></td>
         <td><input type="text" name="comments" id="comments5" value=""></td>
     </tr> 
         <tr>
         <td><input type="text" name="sid" id="sid6" value=""></td>
         <td><input type="text" name="spread" id="spread6" value=""></td>
         <td><input type="text" name="loanType" id="loanType6" value=""></td>
         <td><input type="text" name="comments" id="comments6" value=""></td>
     </tr> 

</table> 
<input type="submit" value="submit" onclick="submitData()">

注意：在我的情况下，该表已存在，我想迭代jsonData对象并在表中显示值。但是我发现了动态创建表并在表中显示JSON数据的示例，而这些代码无法在现有代码中使用。任何输入都将有所帮助..谢谢。

Answer 1

由于具有固定的表结构，因此可以直接通过jsonData进行迭代，并使用$.each将数据绑定到表，如下所示：

$.each(jsonData, function(key, val) {
    $('#table2 tr:eq('+[key + 1]+') td:eq(0) input').val(val.sid);
    $('#table2 tr:eq('+[key + 1]+') td:eq(1) input').val(val.spread);
    $('#table2 tr:eq('+[key + 1]+') td:eq(2) input').val(val.loanType);
    $('#table2 tr:eq('+[key + 1]+') td:eq(3) input').val(val.comments); 
});

$(document).ready(function() {
  submitData = function() {
    var flag = true;
    if (flag) {
      //after getting the values from backend hide the table1 and show table2
      $("#table1").hide();
      $("#table2").show();
      var jsonData = [{
          "sid": "1023",
          "spread": "3",
          "loanType": "auto",
          "comments": "Loan Approved"
        },
        {
          "sid": "1024",
          "spread": "4",
          "loanType": "car",
          "comments": "Loan Approved"
        },
        {
          "sid": "1025",
          "spread": "3",
          "loanType": "auto",
          "comments": "Loan Denied"
        }
      ];

      //iterate and show the jsonData in the table2 which is shown after user click on submit button and hide the table1 and show table2
      $.each(jsonData, function(key, val) {
        $('#table2 tr:eq(' + [key + 1] + ') td:eq(0) input').val(val.sid);
        $('#table2 tr:eq(' + [key + 1] + ') td:eq(1) input').val(val.spread);
        $('#table2 tr:eq(' + [key + 1] + ') td:eq(2) input').val(val.loanType);
        $('#table2 tr:eq(' + [key + 1] + ') td:eq(3) input').val(val.comments);
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" border="1">

  <tr>
    <th>SID</th>
    <th>spread%</th>
    <th>LoanType</th>
    <th>Comments</th>
  </tr>

  <tr>
    <td><input type="text" name="sid" id="sid1" value="100"></td>
    <td><input type="text" name="spread" id="spread1" value="6"></td>
    <td><input type="text" name="loanType" id="loanType1" value="Auto"></td>
    <td><input type="text" name="comments" id="comments1" value="autoLoan"></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid2" value="200"></td>
    <td><input type="text" name="spread" id="spread2" value="7"></td>
    <td><input type="text" name="loanType" id="loanType2" value="Car"></td>
    <td><input type="text" name="comments" id="comments2" value="carLoan"></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid3" value="300"></td>
    <td><input type="text" name="spread" id="spread3" value="6"></td>
    <td><input type="text" name="loanType" id="loanType3" value="Auto"></td>
    <td><input type="text" name="comments" id="comments3" value="autoLoan"></td>
  </tr>
</table>

<table id="table2" border="1" style="display:none">

  <tr>
    <th>SIDTable2</th>
    <th>spread% Table2</th>
    <th>LoanType Table2</th>
    <th>Comments Table2</th>
  </tr>

  <tr>
    <td><input type="text" name="sid" id="sid1" value=""></td>
    <td><input type="text" name="spread" id="spread1" value=""></td>
    <td><input type="text" name="loanType" id="loanType1" value=""></td>
    <td><input type="text" name="comments" id="comments1" value=""></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid2" value=""></td>
    <td><input type="text" name="spread" id="spread2" value=""></td>
    <td><input type="text" name="loanType" id="loanType2" value=""></td>
    <td><input type="text" name="comments" id="comments2" value=""></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid3" value=""></td>
    <td><input type="text" name="spread" id="spread3" value=""></td>
    <td><input type="text" name="loanType" id="loanType3" value=""></td>
    <td><input type="text" name="comments" id="comments31" value=""></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid4" value=""></td>
    <td><input type="text" name="spread" id="spread4" value=""></td>
    <td><input type="text" name="loanType" id="loanType4" value=""></td>
    <td><input type="text" name="comments" id="comments4" value=""></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid5" value=""></td>
    <td><input type="text" name="spread" id="spread5" value=""></td>
    <td><input type="text" name="loanType" id="loanType5" value=""></td>
    <td><input type="text" name="comments" id="comments5" value=""></td>
  </tr>
  <tr>
    <td><input type="text" name="sid" id="sid6" value=""></td>
    <td><input type="text" name="spread" id="spread6" value=""></td>
    <td><input type="text" name="loanType" id="loanType6" value=""></td>
    <td><input type="text" name="comments" id="comments6" value=""></td>
  </tr>

</table>
<input type="submit" value="submit" onclick="submitData()">