克隆錶行jQuery的

運行到有點磚牆使用jQuery的，我現在有下面的代碼：克隆錶行jQuery的

克隆方法的：

$("#addMore").click(function() { 
    $('.user_restriction:last').clone().insertAfter(".user_restriction:last"); 
    return false; 
});

，你可以看到我已經設置好了，所以你可以很容易地克隆行。

我面臨的問題是在新克隆的元素中顯示正確的選擇列表（在「字段」列中），具體取決於他們從第一個select（在'table'列）字段中選擇的字段行。

想知道是否有人能幫我找到解決方法，謝謝！

來源

2013-02-21 Allister

當你克隆行時，你也克隆了必須唯一的ID。 – j08691 2013-02-21 18:26:28

你所面臨的問題時，因爲你正在使用的ID爲您的選擇。 ID 必須在頁面中是唯一的，否則會遇到麻煩。如果你使用一個id克隆一個select，這個id也會被克隆，從而產生一個無效的文檔。

Have a look at the example I created on JsBin

標記：

<tr class="user_restriction"> 
    <td> 
     <select name="table[]" class="userselect"> 
      <option value="" selected>---</option> 
      <option value="members">Members</option> 
      <option value="staff_positions">Staff Positions</option> 
     </select> 
    </td> 
    <!-- and so on, basically just changed ids to classes -->    
</tr>

我改變了所有的ID，以類和改變的變化處理程序，因爲這是你的第二個問題。

事件處理程序將綁定到所選元素，而不是之後添加的元素。對於事件委派，這是一個正確的用例，當處理程序綁定到父項並在本示例中捕獲來自子選擇元素的更改事件時，無論它何時添加到DOM。

使用jQuery，這是一種方式來實現這一目標：

$('table.table').on('change', '.userselect', function() { 

    var activeRow = $(this).parents('tr'); 

    activeRow.find('td').eq(1).find('select').hide(); 

    if(this.value.length === 0){ 
     activeRow.find('td').eq(1).find('select').eq(0).show(); 
    }else{ 
     activeRow.find("." + this.value).show(); 
    } 

});

處理程序綁定到你的table - 元素，.userselect是I類添加到第一選擇一排。因此，稍後添加的元素的每個更改都將被處理。在處理程序中，我將行爲更改爲僅影響實際的表格行，而不是整個表格。

來源

2013-02-21 19:05:19 GNi33

感謝您的幫助GNi33！正是我需要的。 – Allister 2013-02-21 19:16:32

Working example here - 我不得不使用jsbin作爲小提琴玩起來！

克隆不保持選定狀態，因此您需要在克隆之前獲取該值並將其設置爲之後。

你點擊現在變成：

$("#addMore").click(function() { 
    var value = $('.user_restriction:last').find('select').val(); 
    $('.user_restriction:last').clone().insertAfter(".user_restriction:last"); 

     //alert(value); 
$('.user_restriction:last').find('select').val(value); 
    return false; 
});

來源

2013-02-21 18:38:55

克隆錶行jQuery的

回答

相關問題