微信掃碼登錄 ×
個人原創(chuàng) layui動態(tài)添加表格元素刪除代碼
個人原創(chuàng)

layui動態(tài)添加表格元素刪除代碼

收藏
layui動態(tài)添加表格元素刪除代碼
【原創(chuàng)】layui動態(tài)表格制作學(xué)生報考專業(yè)、學(xué)歷、學(xué)校名稱列表。點擊添加增加表格行,支持日期日歷選擇,學(xué)歷和教育類型選擇效果,和刪除表格行功能。這是一款動態(tài)添加數(shù)據(jù)表格代碼。

使用方法:

1、head引入css文件

<link rel="stylesheet" href="lib/css/layui.css">

2、body引入部分

<div class="layui-container">
	<div class="layui-row">
		<div class="layui-form" lay-filter="freshform">
			<table class="layui-table" lay-filter="test">
				<colgroup>
					<col width="150">
					<col width="200">
					<col width="200">
					<col width="200">
					<col width="200">
					<col width="200">
					<col width="150">
				</colgroup>
					<thead>
					<tr>
						<th style="display: none">序號</th>
						<th>開始時間</th>
						<th>結(jié)束時間</th>
						<th>專業(yè)</th>
						<th>學(xué)歷</th>
						<th>學(xué)校名稱</th>
						<th>教育類型</th>
						<th style="text-align: center"><button type="button" class="layui-btn add-btn">添加</button></th>
					</tr>
					</thead>
					<tbody class="addlists">
					<tr>
						<td style="display: none">
							<input type="text" name="number1" value="1">
						</td>
						<td>
							<input type="text"  name="StartTime" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
						</td>
						<td>
							<input type="text" name="EndTime" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
						</td>
						<td>
							<input type="text" name="Major" class="layui-input">
						</td>
						<td>
							<select name="Education" lay-filter="">
								<option value="">請選擇你的學(xué)歷</option>
								<option value="大專及以下">大專及以下</option>
								<option value="本科">本科</option>
								<option value="研究生(碩士)">研究生(碩士)</option>
								<option value="研究生(博士)">研究生(博士)</option>
							</select>
						</td>
						<td>
							<input type="text" name="SchType" class="layui-input">
						</td>
						<td>
							<select name="Education" lay-filter="">
								<option value="">請選擇您的教育類型</option>
								<option value="全日制">全日制</option>
								<option value="在職">在職</option>
							</select>
						</td>
						<td style="text-align: center"><button type="button" class="layui-btn layui-btn-danger btn-del" lay-event="del">刪除</button></td>
					</tr>
					</tbody>
			</table>
		</div>
	</div>
</div>

<script src="lib/layui.all.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bgfun.js"></script>

使用聲明

1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請勿用于商業(yè)用途,會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

x
×
×

注冊

QQ注冊 立即下載 微信注冊 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了