附加到特定元素

时间:2018-04-09 09:20:22

标签: javascript jquery html

我有一个像这样的JSON:

{  
   "data":[  
      "26325",
      "26337",
      "26340"
   ],
   "titles":[  
      "CID",
      "CID",
      "CID"
   ]
}

我只需要创建一个列(因为它们都说CID)。另外如何将html附加到tr ??

基本上它应该创建一个包含1列标题为CID的表和3行包含数据的表。

Jquery的:

 success: function (result) {
          console.log(result);
          var titles = result.titles;
          var data = result.data;

          $.each(titles, function (index, title) {
             var titleHTML = '<th class="text-center text-primary">' + title + '</th>';
             $('#result-table thead tr').append(titleHTML);
          });
      },

HTML

 <div id="results">
                    <%--Javascript generated--%>
                    <table id="result-table">
                        <thead>
                        <tr>

                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>

4 个答案:

答案 0 :(得分:1)

你可以打印数据。如果你只有一列。如果有任何其他专栏即将发布,请告诉我。

var result  = {  
   "data":[  
      "26325",
      "26337",
      "26340",
      "96586"
   ],
   "titles":[  
      "CID",
      "BDI",
      "ACN",
      "CID"
   ]
}
          var titles = result.titles;
          var uniqTitles = result.titles.filter(onlyUnique);
          var data = result.data;
          $.each(uniqTitles, function (index, title) {
            var html = '<th>' + title + '</th>';
            $('#result-table thead tr').append(html);
          });
          $.each(titles, function (index, title) {
             var indexTitle = uniqTitles.indexOf(title);
             var html = '<tr>';
             for(var i=1; i<= indexTitle; i++){
              html += '<td></td>';
             }
             html += '<td>'+ data[index] + '</td>';
             html += '</tr>';
             $('#result-table tbody').append(html);
          });
          
          function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
          }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="results"> 
                    <table id="result-table">
                        <thead>
                        <tr>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

希望这个更新的答案适合你。

答案 1 :(得分:0)

如果标题始终为dbSet.Attach(entity); if (updatedProperties != null) { foreach (var property in updatedProperties) { unitOfWork.DataContext.Entry<TEntity>(entity).Property(property).IsModified = true; } unitOfWork.SaveChanges(); //added } ,您可以忽略它并对头部进行硬编码。然后附加数据可以通过简单的循环实现。这是一个例子。

&#13;
&#13;
CID
&#13;
var data = {  
  "data":[  
    "26325",
    "26337",
    "26340"
  ],
  "titles":[  
    "CID",
    "CID",
    "CID"
  ]
}

//set column-title
if (data.titles.length > 0)
  $('thead').append ('<th>' + data.titles[0] + '</th>');

//loop through data and append to table-tbody
for (var i in data.data)
  if (data.data.hasOwnProperty (i))
    $('tbody').append ('<tr><td>' + data.data[i] + '</td></tr>');
&#13;
&#13;
&#13;

答案 2 :(得分:0)

嗯,你可以试试这种方式

var data = {  
   "data":[  
      "26325",
      "26337",
      "26340"
   ],
   "titles":[  
      "CID",
      "CID",
      "CID"
   ]
}
 $("#table").append(`<tr><th>${data.titles[0]} Title</th></tr>`)
$.each(data.titles, function (index, title) {

 
 $("#table").append(`<tr><th>${this}</th></tr>`)
 
             
          });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table">
</table>

我不知道您决定将列命名为CID的基础。我刚从data.titles的第一个元素中取出它。你可以硬编码或任何你想要的东西。

此外,我正在使用模板文字。它们只是在生成动态html或类似的东西时派上用场。您可以阅读更多相关信息here

答案 3 :(得分:0)

HI尝试下面的代码

$(document).ready(function(){

     $("#table").append('<tr><th>'+data.titles[0]+'</th></tr>')
      $.each(data.data, function (index, title) {
           $("#table").append('<tr><th>'+title+'</th></tr>')
         });

});