.append（）通过索引号乘以jQuery

时间：2018-07-10 15:48:35

标签： javascript jquery html html-table append

我正在尝试将值附加到表中的特定位置。最初，我有一个脚本可以很好地更改输入字段的值，而不是附加值，但是因为我需要做一些包裹输入字段的文本，所以不够。

这是整个项目的摘要（很抱歉，由于字符限制，我不得不将特定区域编辑掉）：

//Course Names
var courseNames = ["Survey Design and Data Analysis", "Masters thesis Research", "Enhancing Teaching Skills", "Evaluation and Assessment", "Strategies for Dealing with the Problem Learner", "Medical Writing and Presentation Skills (Online)", "Topics in Medical Education and Medical Education Research", "Making the Most of Mentoring", "Teaching Practicum: Outpatient Teaching", "Teaching Practicum: Inpatient Teaching", "Teaching Practicum: Classroom Teaching", "Teaching Communication Skills", "Seminar Series in Medical Education", "Introduction to Systematic Reviews and Meta-Analyses"];
var list = $('#courses')[0];

courseNames.forEach(function(item) {
  var option = document.createElement('option');
  option.value = item;
  list.appendChild(option);
});

//Catalog Numbers
var catNumbers = ["MEDEDU 2045", "MEDEDU 2080", "MEDEDU 2100", "MEDEDU 2125", "MEDEDU 2131", "MEDEDU 2140", "MEDEDU 2160", "MEDEDU 2170", "MEDEDU 2201", "MEDEDU 2202", "MEDEDU 2203", "MEDEDU 2250", "MEDEDU 2260", "CLRES 2300", ];
var list = $('#catalogs')[0];

catNumbers.forEach(function(item) {
  var option = document.createElement('option');
  option.value = item;
  list.appendChild(option);
});

//Class #s
var classNum = ["30974", "13755", "13747", "27308", "22757", "13746", "13749", "17483", "13757", "13756", "13758", "13751", "16991", "27310"]

//UnitCr Array
var unitCr = ["1", "1-3", "2", "1", "1", "1", "1", "1", "1", "1", "1", "2", "1", "1"]

//Days
var days = ["W", "Please", "MW", "W", "MW", "Online", "Please", "F", "Please See Instructor", "Please", "Please", "MW", "Please", "MW"]

//Times
var times = ["10:00-12:00", "See", "12:30-2:30", "3:00-5:00", "3:00-5:00", "", "See", "1:00-3:00", "", "See", "See", "1:15-4:15", "See", "9:00-11:00"]

//Building/Rooms
var bldgRm = ["305 Parkvale", "Instructor", "305 Parkvale", "305 Parkvale", "305 Parkvale", "", "Instructor", "305 Parkvale", "", "Instructor", "Instructor", "305 Parkvale", "Instructor", "222 Parkvale"]

//this is the function that is causing me trouble
function UpdateCatNumbers() {
  $('input[name=courseInput]').each(function(index) {
    $(this).change(function() {
      var a = courseNames.indexOf($(this).val())
      $('input[name=catalogInput]').eq(index).val(catNumbers[a]);
      $('.classNumID').eq(index).append(classNum[a]);
      $('.unitCreditID').eq(index).append(unitCr[a]);
      $('.daysID').eq(index).append(days[a]);
      $('.timeID').eq(index).append(times[a]);
      $('.bldgRmID').eq(index).append(bldgRm[a]);

      //$('input[name=classNumInput]').eq(index).val(classNum[a]);
      //$('input[name=unitCreditInput]').eq(index).val(unitCr[a])
      //$('input[name=daysInput]').eq(index).val(days[a]);
      //$('input[name=timeInput]').eq(index).val(times[a]);
      //$('input[name=bldgRmInput]').eq(index).val(bldgRm[a]);
    });
  });
}

//This one is too
function UpdateCourseNames() {
  $('input[name=catalogInput]').each(function(index) {
    $(this).change(function() {
      var b = catNumbers.indexOf($(this).val())
      $('input[name=courseInput]').eq(index).val(courseNames[b]);
      $('#classNumID').eq(index).append(classNum[b]);
      $('#unitCreditID').eq(index).append(unitCr[b]);
      $('#daysID').eq(index).append(days[b]);
      $('#timeID').eq(index).append(times[b]);
      $('#bldgRmID').eq(index).append(bldgRm[b]);

      //$('input[name=classNumInput]').eq(index).val(classNum[b]);
      //$('input[name=unitCreditInput]').eq(index).val(unitCr[b])
      //$('input[name=daysInput]').eq(index).val(days[b]);
      //$('input[name=timeInput]').eq(index).val(times[b]);
      //$('input[name=bldgRmInput]').eq(index).val(bldgRm[b]);
    });
  });
}

$('#lastName').focusout(function() {
  this.value = this.value.toUpperCase();
});

$('#firstName').focusout(function() {
  this.value = this.value.toUpperCase();
});

$('#middleInitial').focusout(function() {
  this.value = this.value.toUpperCase();
});

function pdfButton() {
  if (confirm("To save your enrollment form as a PDF, change the print destination to 'Save as PDF' or change the Printer Name to 'Adobe PDF'")) {
    window.print();
    return false
  }
}
* {
  box-sizing: border-box;
}

.header {
  display: inline-block;
  width: 100%;
  height: 220px;
  padding: 20px;
  text-align: center;
  font-family: Georgia, Times, "Times New Roman", serif;
  color: white;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/f/fb/University_of_Pittsburgh_seal.svg/1200px-University_of_Pittsburgh_seal.svg.png') left center no-repeat content-box, radial-gradient(circle farthest-side, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, 0) 48%, rgba(22, 20, 66, 1) 100%) center center, linear-gradient(rgba(0, 0, 128, 0.35), rgba(0, 0, 128, 0.35)) center center, url('https://consideringadoption.com/wp-content/uploads/2016/01/pittsburgh-image.jpg') center center no-repeat, linear-gradient(rgba(22, 20, 66, 1), rgba(22, 20, 66, 1));
  background-size: 125px, 1150px;
}

.header h1 {
  font-size: 50px;
  text-shadow: 2px 2px 4px #000000;
}

.header p {
  font-size: 25px;
  text-shadow: 3px 3px 4px #000000;
}

a:link {
  color: MintCream;
}

a:visited {
  color: MintCream;
}

.body {
  font-family: Trebuchet MS;
  display: inline-block;
  padding-top: 30px;
  background-color: rgba(240, 206, 142, 1);
}

.sideBar {
  display: inline-block;
  width: 5%;
}

.bodyContent {
  display: inline-block;
  width: 90%;
}

.TopInfo {
  overflow: auto;
  width: 100%;
}

.IdInfo,
.ProgInfo,
.YearInfo {
  border: 1px solid;
  height: 275px;
  overflow: auto;
  display: inline-block;
  padding: 10px;
  padding-top: 55px;
  background-color: rgba(255, 255, 255, .75);
}

.IdInfo {
  width: calc(50% - 10px);
}

.ProgInfo {
  width: calc(30% - 10px);
}

.YearInfo {
  width: calc(20% - 10px);
}

.TopInfo:after {
  content: "";
  display: table;
  clear: both;
}

.IdInfo input {
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
}

#studentID {
  width: 100%;
  letter-spacing: 15px;
}

#lastName,
#firstName {
  letter-spacing: 5px;
}

#lastName {
  witdth: 50%;
}

#firstName {
  width: 40%;
}

#middleInitial {
  width: 10%
}

.ProgInfo input {
  width: 100%;
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
}

.YearInfo input {
  width: 100%;
  align-content: space-between;
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
}

.CourseInfo {
  margin-top: 20px;
}

.CourseInfo p {
  font-size: 14px;
  text-align: center;
}

.Add {
  overflow: auto;
  display: inline-block;
  padding: 20px;
  width: calc(60% - 10px);
  border: 1px solid;
  background-color: rgba(255, 255, 255, .75)
}

.Add input {
  width: 100%;
  vertical-align: top;
  white-space: none;
}

.Add th {
  font-size: 18px;
}

.Drop {
  overflow: auto;
  display: inline-block;
  padding: 20px;
  width: calc(40% - 10px);
  border: 1px solid;
  background-color: rgba(255, 255, 255, .75)
}

.Drop input {
  width: 100%;
  vertical-align: top;
}

.Drop th {
  font-size: 18px;
}

#dropSpace {
  margin: 10px;
}

@media screen and (max-width: 600px) {
  .Add,
  .Drop,
  .IdInfo,
  .ProgInfo,
  .YearInfo {
    width: 100%;
  }
}

textarea {
  resize: none
}

.CourseInfo::after {
  content: "";
  clear: both;
  display: table;
}

.body:after {
  content: "";
  display: table;
  clear: both;
}

.footer {
  display: inline-block;
  width: 100%;
  height: 220px;
  color: white;
  background-color: rgba(22, 20, 66, 1);
  padding: 10px;
  text-align: center;
}

.EndPage2 {
  margin-top: 15px;
  font-size: 11px;
}

.studentSign {
  float: left;
  margin-left: 150px;
}

.advisorSign {
  float: right;
  margin-right: 150px;
}

.submissionButtons {
  display: inline-block;
  cursor: pointer;
}

.submit {
  display: inline-block;
  font-size: 12px;
  margin: 10px;
  padding: 10px;
  background-color: whitesmoke;
  opacity: 0.9;
  width: 200px;
  color: black;
  border: 1px solid;
  vertical-align: middle;
  height: 50px;
}

.submit:hover {
  color: white;
  background-color: rgba(169, 169, 169, .35);
}
<head>
  <link rel="stylesheet" type="text/css" href="testTemplateCss.css">
  <link rel="stylesheet" type="text/css" href="testTemplateCssPrint.css" media="print">
</head>

<body>
  <div class="header">
    <h1>
      ICRE Enrollment Form
    </h1>
  </div>

  <div class="body">

    <div class="sideBar">
      <h3>

      </h3>
    </div>

    <div class="bodyContent">
      <div class="TopInfo">
        <div class="IdInfo">
          <p>
            STUDENT ID
          </p>
          <input id="studentID" placeholder="##Student ID##">
          <p>
            STUDENT NAME (Last, First, M.I.)
          </p>
          <input id="lastName" placeholder="Last Name" required>
          <input id="firstName" placeholder="First Name" required>
          <input id="middleInitial" placeholder="M. I." required>
        </div>

        <div class="ProgInfo">
          <p>
            PROGRAM (School)
          </p>
          <input list="program" name="progName" id="progID" placeholder="Please select your program" required>
          <datalist id="program">
					<option>ICRE</option>
					<option>Other: Please Specify</option>
				</datalist>
          <p>
            PLAN (Major)
          </p>
          <input list="plan" name="planName" id="planID" placeholder="Please select your current plan" required>
          <datalist id="plan">
					<option>Masters in Medical Education</option>
					<option>Certificate in Medical Education</option>
					<option>Masters in Clinical Research</option>
					<option>Certificate in Clinical Research</option>
				</datalist>
        </div>

        <div class="YearInfo">
          <p>
            TERM
          </p>
          <input list="term" name="termName" id="termID" placeholder="Term" required>
          <datalist id="term">
					<option>Summer</option>
					<option>Fall</option>
					<option>Spring</option>
				</datalist>
          <p>
            YEAR
          </p>
          <input list="year" id="yearID" name="yearName" placeholder="Year" required>
          <datalist id="year">
				<option>2018</option>
				<option>2019</option>
				<option>2020</option>
				<option>2021</option>
				<option>2022</option>
				<option>2023</option>
				</datalist>
        </div>
      </div>

      <!-- Here is where I'm trying to execute the function that isn't working -->
      <div class="CourseInfo">
        <div class="Add">
          <span>
        COURSES TO BE ADDED:
 <table>
        <tbody>
          <tr>
            <th style="width: 10%">Class #</th>
            <th style="width: 30%;">Course Title</th>
            <th style="width: 20%;">Catalog Number</th>
            <th style="width: 3%; font-size:16px;">Units/ Credits</th>
            <th style="width: 7%;">*Days</th>
            <th style="width: 14%;">*Time</th>
            <th style="width: 14%;">*Bldg/Rm</th>
            <th style="width: 2%; font-size:16px;">Var Credits</th>
          </tr>
		 
          <tr class="trOne">
			<td class="classNumID"></td>
			<td>
			<input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()">
				  <datalist id="courses" name="courseDatalist">
					<!--Filled in script-->					
				  </datalist>
			</td>
          <td>
		  <input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()">
				  <datalist id="catalogs" name="catalogDatalist">
					<!--Filled in script-->
				  </datalist>
				  </td>
			<td class="unitCreditID"></td>
			<td class="daysID"></td>
      		<td  class="timeID"></td>
      		<td class="bldgRmID"></td>
			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
		  
	     <tr class="trOne">
			<td class="classNumID"></td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td class="unitCreditID"></td>
			<td class="daysID"></td>
      		<td  class="timeID"></td>
      		<td class="bldgRmID"></td>
			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
 	     
		<tr class="trOne">
			<td class="classNumID"></td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td class="unitCreditID"></td>
			<td class="daysID"></td>
      		<td  class="timeID"></td>
      		<td class="bldgRmID"></td>
			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
	
	     <tr>
			<td class="classNumID"></td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td class="unitCreditID"></td>
			<td class="daysID"></td>
      		<td  class="timeID"></td>
      		<td class="bldgRmID"></td>
			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
		  
	     <tr>
			<td class="classNumID"></td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td class="unitCreditID"></td>
			<td class="daysID"></td>
      		<td  class="timeID"></td>
      		<td class="bldgRmID"></td>
			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
		  
	     <tr>
			<td class="classNumID"></td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td class="unitCreditID"></td>
			<td class="daysID"></td>
      		<td  class="timeID"></td>
      		<td class="bldgRmID"></td>
			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
		  
		   <tr>
			<td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
			<td><input list="days" name="daysInput" id="daysID" type="text" placeholder="Days" readonly></td>
      		<td><input list="time" name="timeInput" id="timeID" type="text" placeholder="Time" readonly></td>
      		<td><input list="bldgRm" name = "bldgRmInput" id="bldgRmID" type="text" placeholder="Bldg" readonly></td>
   			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
          <tr>
			<td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
			<td><input list="days" name="daysInput" id="daysID" type="text" placeholder="Days" readonly></td>
      		<td><input list="time" name="timeInput" id="timeID" type="text" placeholder="Time" readonly></td>
      		<td><input list="bldgRm" name = "bldgRmInput" id="bldgRmID" type="text" placeholder="Bldg" readonly></td>
   			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
         <tr>
		<td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
			<td><input list="days" name="daysInput" id="daysID" type="text" placeholder="Days" readonly></td>
      		<td><input list="time" name="timeInput" id="timeID" type="text" placeholder="Time" readonly></td>
      		<td><input list="bldgRm" name = "bldgRmInput" id="bldgRmID" type="text" placeholder="Bldg" readonly></td>
   			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr>
          <tr>
			<td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
			<td><input list="days" name="daysInput" id="daysID" type="text" placeholder="Days" readonly></td>
      		<td><input list="time" name="timeInput" id="timeID" type="text" placeholder="Time" readonly></td>
      		<td><input list="bldgRm" name = "bldgRmInput" id="bldgRmID" type="text" placeholder="Bldg" readonly></td>
   			<td><input id="varCreditID" type="text" placeholder="" ></td>
          </tr> 
        </tbody>
      </table>
    </span>
        </div>
        <div class="Drop">
          <span>
        COURSES TO BE DROPPED:
<table>
        <tbody>
		<form>
          <tr id="dropSpace">
            <th style="width: 17%;">Class #</th>
            <th style="width: 50%;">Course Title</th>
            <th style="width: 28%;">Catalog Number</th>
            <th style="width: 5%; font-size:16px;">Units/ Credits</th>
          </tr>
		  </form>
          <tr>
     <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
       <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
      <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
            <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly></td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
         <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
        <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
           <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
        <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
            <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
          <tr>
          <td><input list="classNum" name="classNumInput" id="classNumID" type="text" placeholder="##" readonly>
			</td>
            <td><input list="courses" name="courseInput" placeholder="Course" oninput="UpdateCatNumbers()"></td>
            <td><input list="catalogs" name="catalogInput" placeholder="Catalog Number" id="catalogID" oninput="UpdateCourseNames()"></td>
			<td><input list="unitCredit" name="unitCreditInput" id="unitCreditID"type="text" placeholder="Units" readonly></td>
          </tr>
        </tbody>
      </table>
      </span>
        </div>
      </div>
      <br>
    </div>

    <div class="sideBar">
      <h3>

      </h3>
    </div>

    <div class="footer">

      <div class="EndPage2">
        <p>
          The student, by signing below, hereby agrees and promises to pay the University all tuition and fees resulting from this registration.
        </p>
      </div>
      <br>
      <span class="studentSign">
    Student Signature
    </span>
      <span class="advisorSign">
    Advisor Signature
    </span>

      <br>
      <br>

      <div class="submissionButtons">
        <div class="submit" onclick="pdfButton()">
          Save as a PDF
        </div>
        <div class="submit">
          Student: Submit to Advisor for Approval
        </div>
        <div class="submit">
          Advisor: Submit to SSC
        </div>
        <div class="submit">
          Advisor: Return to Student for Review
        </div>
      </div>

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="testTemplateJS.js"></script>

</body>

似乎正在发生的事情是，当我执行第一行时（无论我先单击哪个），它都可以正常工作，所有信息都正确地附加到了它们各自的单元格中。之后，每当我单击不同的行时，它都会正确地附加信息，但是根据我单击了多少行，会附加两次，三倍或四次。

请帮助！我不知道为什么会这样。

2 个答案:

答案 0 :(得分：0)

我建议使用事件委托。参考http://learn.jquery.com/events/event-delegation/

使用事件委托，我们可以在表上创建绑定，以监听子代发生的事件。我们还可以对同一表行中的元素（而不是索引）使用上下文查找，以简化逻辑。

此修改后的方法应该仅被调用一次。

function UpdateCatNumbers() {
  //a selector for the table that the inputs are in
  //whatever that may be.  If it doesn't have a class or id
  //give it one for easy selection
  $(TABLESELECTOR).on('change', 'input[name=courseInput]', function() {
    var $this = $(this);
    var $tableRow = $this.closest('tr');
    var a = courseNames.indexOf($this.val());

    //use the table row to find the related fields
    $tableRow.find('input[name=catalogInput]').val(catNumbers[a]);
    $tableRow.find('.classNumID').append(classNum[a]);
    $tableRow.find('.unitCreditID').append(unitCr[a]);
    $tableRow.find('.daysID').append(days[a]);
    $tableRow.find('.timeID').append(times[a]);
    $tableRow.find('.bldgRmID').append(bldgRm[a]);
  });
}

答案 1 :(得分：0)

感谢塔普拉！由于我是Java语言的新手，所以我不了解事件委托。我仔细阅读，并通过添加“ event.stopPropagation（）;”找到了解决该问题的简单方法。

这是我更新的javascript代码：

function UpdateCatNumbers(event) {
    $('input[name=courseInput]').each(function(index) {
        $(this).change(function() {
            var a = courseNames.indexOf($(this).val())
            $('input[name=catalogInput]').eq(index).val(catNumbers[a]);
            $('.classNumID').eq(index).append(classNum[a]);
            $('.unitCreditID').eq(index).append(unitCr[a]);
            $('.daysID').eq(index).append(days[a]);
            $('.timeID').eq(index).append(times[a]);
            $('.bldgRmID').eq(index).append(bldgRm[a]);
            event.stopPropagation();
        }); 
    });
 }
相关问题
最新问题