如何將一個按鈕事件,分別作用在兩個不同區域,且不互相干擾?

各位大大好,
最近寫了一個具有頁籤的網頁,
而這頁籤之中的每一頁都有一個表格,
並可動態的增加/刪除最後一列,
code為以下內容(壓縮了一下空白處,避免文章太冗長):

<!DOCTYPE html><html><title>test tab</title><head>
<meta http-equiv=\"Content-Type\" content=\"text/html\"; charset=\"UTF-8\">
<script type=\"text/javascript\" src=\"//code.jquery.com/jquery-2.1.1.js\"></script>
<script type=\"text/javascript\" src=\"//code.jquery.com/ui/1.11.2/jquery-ui.js\"></script>
<script type=\"text/javascript\">$(function() {//新增欄位
$(\"#contents\").on(\"click\",\".add_new_data\",function(){
$(\".tab_table > tbody > tr:last\").after('<tr><td><input type=\"text\" /></td>'+
'<td><input type=\"text\" /></td></tr>');});
//移除最後欄位
$(\"#contents\").on(\"click\",\".remove_data\",function(){
$(\".tab_table > tbody > tr:last\").remove();});});</script>
<style type=\"text/css\">
#tabs li{ font-size: 1em; width: 3.5em; font-weight: bolder; background: #b4d287; border-bottom: none;
display: inline-block; margin-right: 1em; padding: 0.5em 0.5em 0.35em; color: #999; cursor: pointer;
border-radius: 0.5em 0.5em 0 0 ; line-height: 1; text-align: center; }
#tabs li.enable{ background:#fcf9a6; border-bottom: 0.05em solid #fcf9a6; margin-bottom: -0.05em;
color: #333; }
#contents{ background: #fcf9a6; border: 0 solid #fcf9a6; box-shadow: 0 0 1.5em #ccc; border-radius: 0.5em; }
#contents > div{ display: none; text-align: justify; padding: 0.5em 1em 1em 1em; }
#contents > div:first-of-type{ display: block; } </style>
</head><body><div id=\"tabs\">
<ul id=\"tag\"><li class=\"enable\">頁籤一</li><li>頁籤二</li></ul>
<div id=\"contents\"><div id=\"contents1\"><a>頁籤一</a>
<table class=\"tab_table\" border=\"1\">
<thead><tr><th>th1</th><th>th2</th></tr></thead>
<tbody><tr><td><input type=\"text\" name=\"td1\"/></td>
<td><input type=\"text\" name=\"td2\"/></td></tr></tbody></table>
<div class=\"add_remove_button\">
<button class=\"add_new_data\">增加</button>
<button class=\"remove_data\">減少</button>
</div><!--add_remove_button--></div><!--contents1-->
<div id=\"contents2\"><a>頁籤二</a><table class=\"tab_table\" border=\"1\">
<thead><tr><th>th1</th><th>th2</th></tr></thead>
<tbody><tr><td><input type=\"text\" name=\"td1\"/></td>
<td><input type=\"text\" name=\"td2\"/></td></tr></tbody>
</table><div class=\"add_remove_button\">
<button class=\"add_new_data\">增加</button>
<button class=\"remove_data\">減少</button>
</div><!--add_remove_button--></div><!--contents2-->
</div><!--contents--></div><!--tabs--></body>
<script type=\"text/javascript\">
$('#tabs li').each(function(i){
var _i = i;$(this).click(function(){
$(this).parent().children().removeClass('enable').eq(_i).addClass('enable');
$('#contents').children('div').hide().eq(_i).show();});});
</script></html>

也許是因為我將事件的對象(表格)設成class,
才會在新增一列時,因為這一段
$(\".tab_table > tbody > tr:last\")

設定為發生於最後一個tr,導致雖然表格是分別於兩個不同的位置,
但頁籤一的最後一個tr是在頁籤二,
而頁籤二的第一個tr在頁籤一。

我所期望的是,
在"頁籤一"的表格新增時,是"頁籤一"的表格新增,
在"頁籤二"的表格新增時,是"頁籤一"的表格新增,
兩個之間雖然是用同一個class的表格,但能夠不互相干擾。
我有試過添加$(this),但沒有任何作用,
想請問各位大大們,有沒有遇過相類似的經驗?謝謝!

評論

  • 建議, 放上排版好的code, 不要貼上壓縮後的code, 這樣需要另外排版才能看懂

    //新增欄位

    $('.add_new_data').on('click', function(){
    var newContnet = '<tr><td><input type=\"text\" /></td><td><input type=\"text\" /></td></tr>';

    $(this).parent().siblings('.tab_table').find('tbody').append(newContnet);
    });


    //移除最後欄位

    $('.remove_data').on('click', function(){
    $(this).parent().siblings('.tab_table').find('tbody tr:last').remove();
    });
  • edited 十一月 2014
    感謝cokellen 大的提醒!
    原來是要先找到父元素啊!
    我是用比較笨的方法,
    一樣有使用到siblings(),
    不過是先在html地方新增一個用來記錄頁籤代號的隱藏欄位
    <input type=\"hidden\" name=\"tab_num\" value=\"1\">

    並在JS中取得這代碼數字,
    然後以這數字作為寫入目標頁籤
    var tab_num = $(this).siblings(\"input[name=tab_num]\").val();
    $(\"#contents\" + tab_num + \" .tab_table > tbody > tr:last\").after(........);


    不過相比之下,cokellen大提供的解法時在太厲害了XD
    感謝cokellen 大!
  • @PHPNewbie

    Hi, 你提供的也是一種方法, 有些狀況我也會這樣去做 ;)
Sign In or Register to comment.