Html
    Css
    Js


.ac-main-table {
	table-layout:fixed;
	width:100%;
	font-size:14px;
	color:#000;
}
.ac-main-table th {
	line-height:30px;
	height:30px;
	background-color:#f5f5f5;
	text-align:center;
	border:1px solid #ccc;
}
.ac-main-table td {
	padding:10px;
	line-height:22px;
	text-align:center;
	border:1px solid #ccc;
}
.ac-main-table td>p {
	display:inline-block;
	text-align:left;
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

构建重复dom元素(原创)

简单构建 重复dom 的js插件

本插件不依赖jquery功能是根据你提供的数组数据进行遍历, 构建出只是结构一致, 数据不同的重复元素, 功能类似 vue 的v-for,angular 的ng - repeatie9 + 写法如下 html: (这个是模板, 两个 '#'之间的是要替换数据的部分) 

<table class="ac-main-table layer-table">
    <thead>
        <tr>
            <th width="130px">编号</th>
            <th width="130px">名称</th>
            <th width="130px">拼音</th>
        </tr>
    </thead>
    <tbody id="J-pai-search-data">
    </tbody>
</table>

<script id="J-my-template-demo" type="text/html">
    <tr>
        <td><a href="#href#" data-name="#name#" data-number="#number#" class="ac-item-name J-item-name">#number#</a></td>
        <td>#name#</td>
        <td>#letter#</td>
    </tr>
</script>

 js:

new srepeat({
        bucket: '#j-pai-search-data',
        data: data,
        template: '#j-my-template-demo',
        keydir: {
            "href": "href",
            "name": "name",
            "number": "number",
            "letter": "letter.abc",
            "key": "key"
        },
        defaultval: {
            href: "javascriptt:void(0);"
        }
}).init();

js 参数说明:

/** * option 参数 * * bucket: css选择器, 如果提供,生成完重复dom后,会将这些dom放入bucket指定的容器 * template: css选择器, 存放模板dom的父节点,用于获取重复dom模板 * data:  数组, 根据data遍历,将对应的数据填入repeatdom * * keydir: 对象, 模板中的key与正式json数据中的key的查询字典 * defaultval: 对象, 如果键对应的值是固定的,则可传默认值,优先级大于keydir * * */

例子提供的假数据:

var data = [{
    "number": 1,
    "name": "第一行重复元素",
    "href": "http://456.com.cn",
    "letter": {
        "abc": "di yi hang"
    }
}, {
    "number": 2,
    "href": "http://123.com.cn",
    "name": "第二行重复元素",
    "letter": {
        "abc": "di er hang"
    }
}];
0
  短信接口