値が変更時に同じ値に置き換えられる - jquery

Question

ドロップダウン値に最も近い行を表示する必要があります。しかし、ここで何が起こっているのは、行を追加すると、値がドロップされたときに値がその値に置き換えられることです。

$(document).on('change', '.BundleAssetType', function() { 
 

 
    var class1 = class2 = class3 = class4 = ''; 
 
    var id = $(this).val(); 
 

 

 
    class1 = $(this).closest('tr').find("td:eq(1) input[type='text']").attr('class').split(' ')[1]; 
 
    class2 = $(this).closest('tr').find("td:eq(2) input[type='text']").attr('class').split(' ')[1]; 
 
    class3 = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('class').split(' ')[1]; 
 
    class4 = $(this).closest('tr').find("td:eq(4) input[type='text']").attr('class').split(' ')[1]; 
 

 

 
    $('.' + class1).val(id); 
 
    $('.' + class2).val(id); 
 
    $('.' + class3).val(id); 
 
    $('.' + class4).val(id); 
 

 
}); 
 

 
$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var $lastTr = $tr.closest('table').find('tr:last'); 
 
    var $clone = $lastTr.clone(); 
 

 
    $clone.find('td').each(function() { 
 
    var el = $(this).find(':first-child'); 
 
    var id = el.attr('id') || null; 
 
    if (id) { 
 
     var i = id.substr(id.length - 1); 
 
     var prefix = id.substr(0, (id.length - 1)); 
 
     el.attr('id', prefix + (+i + 1)); 
 
    } 
 
    }); 
 

 
    $clone.find('input:text').val(''); 
 
    $tr.closest('tbody').append($clone); 
 

 

 
}); 
 

 
$(document).on('click', '.deleteB', function() { 
 
    //dont delete the last data row 
 
    var parentId = $(this).closest('table').attr('id'); 
 

 
    if ($('#' + parentId + ' tr').length > 3) { 
 
    var $tr = $(this).closest('tr'); 
 
    $tr.remove(); 
 

 
    } 
 

 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th colspan="2" style="text-align: center">AM</th> 
 
     <th colspan="2" style="text-align: center">PM</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th width="30%">Category</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]"> 
 
      <option value="">--Select Category --</option> 
 
      <option value="4">Medium Roller</option> 
 
      <option value="2">Paver</option> 
 
      <option value="1">Small Roller</option> 
 
      <option value="3">Sweet Paver</option> 
 
     </select> 
 

 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm"> 
 
     </td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
 
      <button type="button" class="add btn btn-sm btn-primary">+</button> 
 
      <button type="button" class="deleteB btn btn-sm btn-danger">-</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

任意の提案をお願いします。

Answer 1

ここ

$('.' + class1).val(id); 
    $('.' + class2).val(id); 
    $('.' + class3).val(id); 
    $('.' + class4).val(id); 

あなたはこれらのクラスを持っている文書全体ですべて要素を選択しているからです。

$(document).on('change', '.BundleAssetType', function() { 
 

 
    var class1 = class2 = class3 = class4 = ''; 
 
    var id = $(this).val(); 
 
    var closest_tr = $(this).closest('tr'); 
 

 
    class1 = closest_tr.find("td:eq(1) input[type='text']").attr('class').split(' ')[1]; 
 
    class2 = closest_tr.find("td:eq(2) input[type='text']").attr('class').split(' ')[1]; 
 
    class3 = closest_tr.find("td:eq(3) input[type='text']").attr('class').split(' ')[1]; 
 
    class4 = closest_tr.find("td:eq(4) input[type='text']").attr('class').split(' ')[1]; 
 

 
    $('.' + class1, closest_tr).val(id); // passing closest_tr as context 
 
    $('.' + class2, closest_tr).val(id); // makes it search for elements 
 
    $('.' + class3, closest_tr).val(id); // only that are inside of that TR 
 
    $('.' + class4, closest_tr).val(id); 
 

 
}); 
 

 
$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var $lastTr = $tr.closest('table').find('tr:last'); 
 
    var $clone = $lastTr.clone(); 
 

 
    $clone.find('td').each(function() { 
 
    var el = $(this).find(':first-child'); 
 
    var id = el.attr('id') || null; 
 
    if (id) { 
 
     var i = id.substr(id.length - 1); 
 
     var prefix = id.substr(0, (id.length - 1)); 
 
     el.attr('id', prefix + (+i + 1)); 
 
    } 
 
    }); 
 

 
    $clone.find('input:text').val(''); 
 
    $tr.closest('tbody').append($clone); 
 

 

 
}); 
 

 
$(document).on('click', '.deleteB', function() { 
 
    //dont delete the last data row 
 
    var parentId = $(this).closest('table').attr('id'); 
 

 
    if ($('#' + parentId + ' tr').length > 3) { 
 
    var $tr = $(this).closest('tr'); 
 
    $tr.remove(); 
 

 
    } 
 

 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th colspan="2" style="text-align: center">AM</th> 
 
     <th colspan="2" style="text-align: center">PM</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th width="30%">Category</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]"> 
 
      <option value="">--Select Category --</option> 
 
      <option value="4">Medium Roller</option> 
 
      <option value="2">Paver</option> 
 
      <option value="1">Small Roller</option> 
 
      <option value="3">Sweet Paver</option> 
 
     </select> 
 

 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm"> 
 
     </td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
 
      <button type="button" class="add btn btn-sm btn-primary">+</button> 
 
      <button type="button" class="deleteB btn btn-sm btn-danger">-</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

：

あなたが最も近いTRに渡すことで、この問題を解決することができ、クラスによって、これらの要素を選択する際に、コンテキストとして（あなたがいることを複数回使用しているためのは、パフォーマンス上の理由から変数にそれを保存してみましょう）ここ

Answer 2

は、その行の入力のみに選択された値を適用することで作業のフィドルある：

$(document).on('change', '.BundleAssetType', function() { 
 

 
    var class1; 
 
    var id = $(this).val(); 
 
    
 
    class1 = $(this).parents('tr').find("input[type='text']").val(id); 
 

 
}); 
 

 
$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var $lastTr = $tr.closest('table').find('tr:last'); 
 
    var $clone = $lastTr.clone(); 
 

 
    $clone.find('td').each(function() { 
 
    var el = $(this).find(':first-child'); 
 
    var id = el.attr('id') || null; 
 
    if (id) { 
 
     var i = id.substr(id.length - 1); 
 
     var prefix = id.substr(0, (id.length - 1)); 
 
     el.attr('id', prefix + (+i + 1)); 
 
    } 
 
    }); 
 

 
    $clone.find('input:text').val(''); 
 
    $tr.closest('tbody').append($clone); 
 

 

 
}); 
 

 
$(document).on('click', '.deleteB', function() { 
 
    //dont delete the last data row 
 
    var parentId = $(this).closest('table').attr('id'); 
 

 
    if ($('#' + parentId + ' tr').length > 3) { 
 
    var $tr = $(this).closest('tr'); 
 
    $tr.remove(); 
 

 
    } 
 

 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th colspan="2" style="text-align: center">AM</th> 
 
     <th colspan="2" style="text-align: center">PM</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th width="30%">Category</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]"> 
 
      <option value="">--Select Category --</option> 
 
      <option value="4">Medium Roller</option> 
 
      <option value="2">Paver</option> 
 
      <option value="1">Small Roller</option> 
 
      <option value="3">Sweet Paver</option> 
 
     </select> 
 

 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm"> 
 
     </td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
 
      <button type="button" class="add btn btn-sm btn-primary">+</button> 
 
      <button type="button" class="deleteB btn btn-sm btn-danger">-</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>