如果使用jquery输入一个字段，则自动填充其他字段

Autofill other fields automatically if one field is entered with jquery

本文关键字：字段 其他 填充 一个 jquery 输入 如果      更新时间：2023-09-26

请检查我的小提琴。

Fiddle

当我在slab_range的任何行中输入任何数据时，我需要用值"No Bid"自动填充"slab range"的所有其他行。如果我留下空白，什么都不用填。同样，如果我在"零件号"中输入任何数据，则"零件编号"的所有其他行都必须填充值"2"。这些行来自数据库，所以我不知道它会有多少行，它应该迭代所有的行。

    <tr>
    <td>
   <input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
    </td>
    <td>
    <input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
    </td>
    <td>
    <input size="9" name="item_partno[]" id="item_partno[]" type="text">
    </td>
    </tr>

好了，现在您的任务是重构代码，因为这两个方法是相等的。

var ProcessTable = (function () {
	
  var _slabs, _partsNumber;
  
  var _init = function () {
  	_slabs = $('input[name^="slab_range"]');
    _partsNumber = $('input[name^="item_partno"]');
    
  	_slabs.on('blur', _slabBlurHandler);
    _partsNumber.on('blur', _partNumberBlurHandler);
  };
  
  var _slabBlurHandler = function (e) {
  	var value = $.trim($(this).val());
    
    if (value !== '') {
    	_slabs.val('No bid');
    } else {
    	_slabs.val('');
    }
    
    $(this).val(value); // Because the previous line override the original value
  };
  
  var _partNumberBlurHandler = function (e) {
  		var value = $.trim($(this).val());
    
    if (value !== '') {
    	_partsNumber.val('2');
    } else {
    	_partsNumber.val('');
    }
    
     $(this).val(value); // Because the previous line override the original value
  };
  
  return {
  	init: _init
  }
})();
ProcessTable.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cart1" name="cart" method="post" class="single" action="price_edit_save.php?supplier_name=Jupiter+Microwave+Components+Inc&amp;tender_id=151501">
	<div class="clone_row">
		<table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
			<thead>
				<tr bgcolor="#E6E6FA">
					<th width="4%">SlNo</th>
					<th width="4%">Slab Range</th>
					<th width="6%">Part Number</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input size="1" name="id[0]" value="9978" readonly="readonly" type="hidden">
						<input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
						<input size="1" id="item_id[0]" name="item_id[0]" readonly="readonly" type="hidden">
					</td>
					<td>
						<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
					</td>
					<td>
						<input size="9" name="item_partno[]" id="item_partno[]" type="text">
					</td>
				</tr>
				<tr>
					<td>
						<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
						<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
						<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
					</td>
					<td>
						<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
					</td>
					<td>
						<input size="9" name="item_partno[]" id="item_partno[]"  type="text">
					</td>
				</tr>
			   				<tr>
					<td>
						<input size="1" name="id[1]" value="9979" readonly="readonly" type="hidden">
						<input size="1" id="sl[1]" name="sl[1]" value="2" type="text">
						<input size="1" id="item_id[1]" name="item_id[1]" readonly="readonly" type="hidden">
					</td>
					<td>
						<input size="9" data-validation="required" name="slab_range[]" id="slab_range[]" type="text">
					</td>
					<td>
						<input size="9" name="item_partno[]" id="item_partno[]"  type="text">
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="addMoreDIV">
		&nbsp;</div>
	<table>
		<tr>
			<td>
				<input value="--Update Data--" type="submit">
			</td>
		</tr>
	</table>
</form>

当你请求"帮助"时，请更加友善。

相关文章：