Question

我有以下JSON，我正在创建一个表

{
   "tag_video_details": [{
      "video_id": "369",
      "tag_name": "three",
      "video_name": "test 001",
      "video_file": "xxx",
      "Video_details": [
         "one",
         "two",
         "three"
      ]

   }]
}

创建表时，如何使用内部数组

创建如下所示的td

<td>
            <span class="btn btn-sm btn-success btn-circle">one</span>
            <span class="btn btn-sm btn-success btn-circle">two</span>
            <span class="btn btn-sm btn-success btn-circle">three</span>
         </td>

我在这个小提琴中硬编码

http://jsfiddle.net/cod7ceho/297/

 function updatetable(aajxresponse)
{
        var html = '<tr class="existingvideos">\
            <th width="20%">ID</th>\n\
            <th width="35%">Name</th>\n\
            <th width="30%">Course</th>\n\
            <th width="15%">SERT</th>\n\
        </tr>';
        for (var i = 0; i < aajxresponse.tag_video_details.length; i++)
        {
                html += '<tr video-id="' + aajxresponse.tag_video_details[i].video_id + '"  class="newvideos exercises-add-table-content">\
                             <td>' + capitalise(aajxresponse.tag_video_details[i].video_id) + '</td>\n\
                             <td>' + capitalise(aajxresponse.tag_video_details[i].video_name) + '</td>\n\
<td>\n\
<span class="btn btn-sm btn-success btn-circle">one</span>\n\
<span class="btn btn-sm btn-success btn-circle">two</span>\n\
 <span class="btn btn-sm btn-success btn-circle">three</span>\n\
 </td>\n\
 <td>FDUY</td>\n\
</tr>'
        }
        $("#videosfromtagstable tbody").html(html);
}

Answer 1

此fiddle for循环

这是纯jQuery函数，$.each循环

var aajxresponse = {
  "tag_video_details": [{
    "video_id": "369",
    "tag_name": "three",
    "video_name": "test 001",
    "video_file": "xxx",
    "Video_details": [
      "one",
      "two",
      "three"
    ]

  }]
}

$(document).ready(function() {

  $("#videosfromtagstable tbody").updatetable(aajxresponse);

});

jQuery.fn.updatetable = function(aajxresponse) {
  var html = '<tr class="existingvideos">\
            <th width="20%">ID</th>\n\
            <th width="35%">Course</th>\n\
            <th width="30%">Name</th>\n\
            <th width="15%">SERT</th>\n\
        </tr>';
  var span = '<span class="btn btn-sm btn-success btn-circle"></span> ';
  var v = aajxresponse.tag_video_details;
  $.each(v, function(a, b) {
    html += '<tr video-id="' + b.video_id + '"  class="newvideos exercises-add-table-content">\
                             <td>' + capitalise(b.video_name) + '</td>\n\
                            <td><a href="' + b.video_file + '" target="_blank">' + b.video_file.split('/').pop() + '</a></td>\n';
    var vd = b.Video_details;
    html += '<td>\n';
    $.each(vd, function(x, j) {
      html += span.split("</span>").join(j + "</span>");
    });
    html += '</td>\n';
    html += '<td>\n\
<i class="fa fa-check"></i>\n\
</td>\n\
</tr>';
  });
  $(this).html(html);
}

function capitalise(string) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
  <tbody class="connectedSortable ui-sortable">

  </tbody>
</table>

在这种情况下如何使用JSON创建表

1 个答案: