生活随笔
收集整理的這篇文章主要介紹了
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
動態創建表格給同一個標簽創建點擊事件，每個點擊事件操作的元素不一樣。
現在有這樣的需求，點擊“查看詳細”顯示或隱藏標簽。要實現這樣的效果就要給點擊標簽添加兩個屬性，一個屬性是name，它的值和隱藏標簽的id要一致，還有添加屬性show（這個是自定義的），值默認為false，當為true時將標簽顯示。
效果如下：
代碼如下（要引入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>上一環節
</th><th>上一環節
</th><th>備注
</th><th width="150px;">操作
</th></tr><tr><td>雙笙
</td><td>18318182223
</td><td>東城中心
</td><td>客戶確認
</td><td>熱線確認
</td><td>確認成功
</td><td><a href="#" name="renew1" show=false onclick="change(this);" >查看詳細
</a></td></tr><tr style="display: none;" id="renew1"><td colspan="7">確認結果：成功
</td></tr><tr><td>玄觴
</td><td>18318188329
</td><td>東城中心
</td><td>審批
</td><td>等待繳費
</td><td>辦理失敗
</td><td><a href="#" name="renew2" show=false onclick="change(this);" >查看詳細
</a></td></tr><tr style="display: none;" id="renew2"><td colspan="7">自動辦理結果：失敗
</td></tr><tr><td>冏菌
</td><td>18313742251
</td><td>東城中心
</td><td>客戶確認
</td><td>熱線確認
</td><td>確認成功
</td><td><a href="#" name="renew3" show=false onclick="change(this);" >查看詳細
</a></td></tr><tr style="display: none;" id="renew3"><td colspan="7">處理結果：失敗
</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>
總結
以上是生活随笔為你收集整理的动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
