我想添加行並再次鎖定

Question

首先進行正常的無錯鎖定。我想再次添加行壓力鎖定。 哪裏可能出錯？ 如果你看看這個例子，我會很高興。 添加行>不工作demo

HTML

<table class="color" cellpadding="2" cellspacing="2" id="myTable"> 
<tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>Lock/Unlock</td> 
    <td>Lock/Unlock</td> 
    <td>Lock/Unlock</td> 
</tr> 


<tr class="row"> 
    <td>1</td> 
    <td> 
     <select name="select" id="selecta"> 
      <option value="0"></option> 
      <option value="1" selected>Lock</option> 
      <option value="2">Unlock</option> 
     </select> 
    </td> 

    <td> 
     <input name="textfield" type="text" class="textfield" value="1" /> 
    </td> 
    <td> 
     <input name="textfield" type="text" class="textfield" value="1" /> 
    </td> 
    <td> 
     <input name="textfield" type="text" class="textfield" value="1" /> 
    </td> 
</tr> 
<tr class="row"> 
    <td>1</td> 
    <td> 
     <select name="select" id="selecta"> 
      <option value="0"></option> 
      <option value="1" selected>Lock</option> 
      <option value="2">Unlock</option> 
     </select> 
    </td> 

    <td> 
     <input name="textfield" type="text" class="textfield" value="1" /> 
    </td> 
    <td> 
     <input name="textfield" type="text" class="textfield" value="1" /> 
    </td> 
    <td> 
     <input name="textfield" type="text" class="textfield" value="1" /> 
    </td> 
</tr> 

    <tfoot> 
     <tr> 
      <td colspan="5" style="text-align: left;"> 
       <input type="button" id="addrow" value="Add Rows" /> 
      </td> 
     </tr> 

    </tfoot> 
</table> 

JS

$(document).ready(function() { 
    $('.row').each(function() { 
     var $dropdown = $(this).find('#selecta'), 
      $textfield = $(this).find('.textfield'); 
     $dropdown.change(function() { 
      if ($dropdown.val() != '1') { 
       $textfield.removeAttr('disabled'); 
      } else { 
       $textfield.attr('disabled', 'disabled').val(''); 
      } 
     }).trigger('change'); // added trigger to calculate initial state 
    }); 
}); 

$(document).ready(function() { 
      var counter = 0; 

      $("#addrow").on("click", function() { 

       counter = $('#myTable tr').length - 2; 

       var newRow = $('<tr class="row">'); 
       var cols = ""; 

       cols += ' <td>1</td><td><select name="select" id="selecta"><option value="0"></option><option value="1" selected>Lock</option><option value="2">Unlock</option></select> </td><td><input name="textfield" type="text" class="textfield" value="1" /></td><td><input name="textfield" type="text" class="textfield" value="1" /></td><td> <input name="textfield" type="text" class="textfield" value="1" /></td>'; 

       cols += '<td><input type="button" value="x" ></td>'; 
       newRow.append(cols); 
       if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit"); 
       $("table.color").append(newRow); 
       counter++; 
      }); 

    $("table.color").on("click", ".buttons", function (event) { 
     $(this).closest("tr").remove(); 
     calculateGrandTotal(); 

     counter -= 1 
     $('#addrow').attr('disabled', false).prop('value', "Add Rows"); 
    }); 


}); 

我要添加行壓力再次鎖定。

Answer 1

你不想使用duplicate IDs。因此，我已在您的標記和代碼中將#selecta更改爲.selecta。

既然你動態地添加行，你有約束力的「行鎖定」處理時，按如下使用事件委派：

$(document).ready(function() { 
    $(document).on('change','.selecta',function() { 
     $(this).closest('.row').find('.textfield') 
     .prop('disabled', (this.value == '1')) 
     .val(this.value == 1 ? '' : this.value); 
    }); 
    $('.selecta').change();// added trigger to calculate initial state 
}); 

然後，一旦一個新行被添加，你必須改變觸發在該行中的選擇：

newRow.find('.selecta').change(); 

WORKING JSFIDDLE DEMO

我喜歡操控，而不必添加的disabled屬性d刪除disabled屬性。