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

各位大大好,
最近寫了一個具有頁籤的網頁,
而這頁籤之中的每一頁都有一個表格,
並可動態的增加/刪除最後一列,
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.