如何使用相同样式添加引导表行?

时间:2018-08-14 14:55:43

标签: javascript jquery html ajax bootstrap-4

我想使用jquery添加一个新表行。但就我而言,风格是不同的。如何解决这个问题呢?在这里,我添加了一些代码和视图的屏幕截图。这些有助于理解我的问题。

HTML部分:

<div id="table_show" style="display: none" class="section table-responsive">
      <h2><center>Table View</center></h2>
        <table id="triple_table" width="100%"class="table table-bordered">
          <thead>
          <tr>
            <th>Subject</th>
            <th>Predicate</th>
            <th>Object</th>
          </tr>
          </thead>
          <tbody>
            <tr class="info">
              <td class="col-sm-4">Danger</td>
              <td class="col-sm-4">Moe</td>
              <td class="col-sm-4">mary@example.com</td>
            </tr>
          </tbody>
        </table>
    </div>  

jQuery部分:

 var serialized_data='';
   $.each(response_data,function(key, value){
          serialized_data += key + " : " + value +"\n";
          if(key=='id'){
            $("#triple_table").append("<tr>"+"</tr>");
          }
          if(key!=='id'){
          $("#triple_table").append("<td>" + value + "</td>");
         }
        })
        $('#textareashow').append(serialized_data);

My View:

1 个答案:

答案 0 :(得分:-1)

只需在附加tr中添加class ='info'

$.each(response_data,function(key, value){
          serialized_data += key + " : " + value +"\n";
          if(key=='id'){
            $("#triple_table").append("<tr class='info'>"+"</tr>");
          }
          if(key!=='id'){
          $("#triple_table").append("<td class='info'>" + value + "</td>");
         }
        })
        $('#textareashow').append(serialized_data);