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>th1th>
         <th>th2th>
        <th>th3th>
        <th>th4th>
        <th>th5th>
        tr>
        thead>
       <tbody id="contractVersionListShow">
       tbody>
       table> 

要转化为string的html代码

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

转化后结果

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

NOTICE:重点在于将双引号放在单引号中是合法的。

你可能感兴趣的:(frontend)