JS 中如何拼湊html

什麼是拼湊html？

在循環顯示資料例如list或者tbody中，要求動态顯示，僅僅是html靜态設計是無法滿足要求的，是以在javascript中動态的拼接html就現在很試用了。

需要使用到的知識點：

1）javascript中，單引号和雙引号都可以是string，單引号中可以引用雙引号是合法的，雙引号中單引号同樣合法

如：

'<a href="link url" >'
           

這是合法的

"<a href='link url'>"
           

這也是合法的。

2）javascript中使用prepend或者append方法可以添加html代碼

//1）javascript中定義表格變量
var tableHtml = "";// 拼接展示清單
//3）選擇好tbody id，調用函數prepend 函數添加html
$("#contractVersionListShow").prepend(tableHtml);
           

關鍵是如何将tablehtml指派。

在這裡使用tbody為例子：

html 表格代碼

<table class="table table-striped table-hover" id="contractVersionTable">
    <thead>
      <tr>
         <th style="width:5%;"><input type="checkbox"></th>
         <th>th1</th>
         <th>th2</th>
        <th>th3</th>
        <th>th4</th>
        <th>th5</th>
        </tr>
        </thead>
       <tbody id="contractVersionListShow">
       </tbody>
       </table> 
           

要轉化為string的html代碼

轉化後結果

"<tr id="+'"tr1"><td><a href='+'""http:www.xxx.com""'+"></td>"
           

NOTICE:重點在于将雙引号放在單引号中是合法的。