生活随笔
收集整理的這篇文章主要介紹了
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
動(dòng)態(tài)創(chuàng)建表格給同一個(gè)標(biāo)簽創(chuàng)建點(diǎn)擊事件，每個(gè)點(diǎn)擊事件操作的元素不一樣。
現(xiàn)在有這樣的需求，點(diǎn)擊“查看詳細(xì)”顯示或隱藏標(biāo)簽。要實(shí)現(xiàn)這樣的效果就要給點(diǎn)擊標(biāo)簽添加兩個(gè)屬性，一個(gè)屬性是name，它的值和隱藏標(biāo)簽的id要一致，還有添加屬性show（這個(gè)是自定義的），值默認(rèn)為false，當(dāng)為true時(shí)將標(biāo)簽顯示。
效果如下：
代碼如下（要引入Jquery）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="myjs/jquery-1.9.1.min.js"></script><title>表格測試
</title>
</head>
<body><table border="1"><tr><th>姓名
</th><th>電話號碼
</th><th>住址
</th><th>上一環(huán)節(jié)
</th><th>上一環(huán)節(jié)
</th><th>備注
</th><th width="150px;">操作
</th></tr><tr><td>雙笙
</td><td>18318182223
</td><td>東城中心
</td><td>客戶確認(rèn)
</td><td>熱線確認(rèn)
</td><td>確認(rèn)成功
</td><td><a href="#" name="renew1" show=false onclick="change(this);" >查看詳細(xì)
</a></td></tr><tr style="display: none;" id="renew1"><td colspan="7">確認(rèn)結(jié)果：成功
</td></tr><tr><td>玄觴
</td><td>18318188329
</td><td>東城中心
</td><td>審批
</td><td>等待繳費(fèi)
</td><td>辦理失敗
</td><td><a href="#" name="renew2" show=false onclick="change(this);" >查看詳細(xì)
</a></td></tr><tr style="display: none;" id="renew2"><td colspan="7">自動(dòng)辦理結(jié)果：失敗
</td></tr><tr><td>冏菌
</td><td>18313742251
</td><td>東城中心
</td><td>客戶確認(rèn)
</td><td>熱線確認(rèn)
</td><td>確認(rèn)成功
</td><td><a href="#" name="renew3" show=false onclick="change(this);" >查看詳細(xì)
</a></td></tr><tr style="display: none;" id="renew3"><td colspan="7">處理結(jié)果：失敗
</td></tr><script type="text/javascript">function change(obj) {var id = $(obj).attr("name"); var result = $(obj).attr("show"); if (result == "true") {$("#"+id).hide();$(obj).attr("show","false"); } else {$("#"+id).show();$(obj).attr("show","true"); } }</script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
