when text changed inputbox automatically updates next 6 text boxes

问题

I have 7 textboxes. If Top 1 textbox(Volume All Years) text changed, text need to be updated in next 6 inputboxes(Latest 2009 Volume to Latest 2014 Volume). I need javascript or Jquery for this. I will write Js textchanged() or focuschange() for top 1 textbox. So what should I write in focuschage() or textchanged methods()

<tr id="row12_136" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Volume All Years</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_136" type="text" maxlength="255" id="12_136" tabindex="61" title="Volume All Years" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                    </td>
                </tr><tr id="row12_60" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2009 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_60" type="text" maxlength="255" id="12_60" tabindex="62" title="Latest 2009 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_60" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl47" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_61" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2010 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_61" type="text" maxlength="255" id="12_61" tabindex="63" title="Latest 2010 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_61" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl48" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_62" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2011 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_62" type="text" maxlength="255" id="12_62" tabindex="64" title="Latest 2011 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_62" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl49" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_63" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2012 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_63" type="text" maxlength="255" id="12_63" tabindex="65" title="Latest 2012 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_63" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl50" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_64" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2013 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_64" type="text" maxlength="255" id="12_64" tabindex="66" title="Latest 2013 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_64" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl51" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_65" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2014 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_65" type="text" maxlength="255" id="12_65" tabindex="67" title="Latest 2014 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_65" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl52" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>

回答1:

With that html, and where #foo is a selector to zero in on the appropriate table:

$('tr.RegText input:eq(0)').change(function() {
  $('tr.RegText input:gt(0):lt(7)').val($(this).val());
});

This assumes that change on blur of the first input field is acceptable. Change to keyup or whatever to taste.

回答2:

using jQuery:

$("#12_136").keyup(function(){
  var $myVal = $("#12_136").val();
  for(var i = 0; i < 6; i ++) {
    $("#12_6"+i).val($myVal);
  }
});

回答3:

Drop your inline keypress event in your HTML. You can attach event handlers easily at run-time.

With jQuery you can do it with this. I'm using "onchange". I don't think you need to do this at a keypress level.

$(document).ready(function() { init() })


function init() {     
     $('#12_136').change(function() {
          var myVal = $(this).attr('value')
          $(this).parents('table').find('input').attr('value',"#" + myVal + "#" )
     })
}

来源：https://stackoverflow.com/questions/2815582/when-text-changed-inputbox-automatically-updates-next-6-text-boxes