Javascript、html

Question

Javascriptを使用して入力フィールドからテーブルを動的に作成しました。ユーザーが3を入力してgoをクリックすると、3行の表が作成されます。

私は.keyup機能を使用してクローンをターゲットにしていました。問題は、var x = $("#inputfieldid").val()が最後の行の値だけを返し、他の行は空を返します。

/*creating the table dynamically*/ 
 
    function createTable() { 
 
    var a = document.getElementById('course_no').value; 
 
    var level = document.getElementById('level').value; 
 
    var semester = document.getElementById('semester').value; 
 
    if (a === "" || level==="" || semester==="" || isNaN(a)===true) { 
 
     alert("OOPs...","Please make sure you select level, semester and enter the number of courses","error"); 
 
    } else { 
 
     $("#select_this").hide(); 
 
     $("#table_result").show(); 
 
     var th = document.querySelectorAll('#table th');//To check whether `TD` is appended in table or not! 
 
     if (!th.length) { 
 
     //If not appended, then append TD in table 
 
     var rows = "<th><p><h4>S/N</h4></p></th><th><p><h4>COURSE CODE</h4></p></th><th><p><h4>COURSE UNIT</h4></p></th><th><p><h4>SCORE</h4></p></th><th><p><h4>GRADE</h4></p></th>"; 
 
     var table = document.createElement('table'); 
 
     table.innerHTML = rows; 
 
     document.getElementById("table").appendChild(table.firstChild); 
 
     } 
 

 
     for (var i = 0; i < a; i++) { 
 
     var rid = i + 1; 
 
     var elems = ''; 
 
     elems += "<tr><td><p><b>"+rid+"</b></p></td><td><p><b><input class='form-control' type='text' name='" + "course_code".concat(i + 1) + "' id='" + "course_code".concat(i + 1) + "'></b></p></td><td><p><b><input class='form-control' type='text' name='" + "course_unit".concat(i + 1) + "' id='" + "course_unit".concat(i + 1) + "'></b></p></td><td><p><b><input class='form-control' type='text' name='" + "score".concat(i + 1) + "' id='" + "score".concat(i + 1) + "'></b></p></td><td><p><b><input class='form-control' type='text' readonly name='" + "grade".concat(i + 1) + "' id='" + "grade".concat(i + 1) + "'></b></p></td></tr>"; 
 
     var table = document.createElement('table'); 
 
     table.innerHTML = elems; 
 
     document.getElementById("table").appendChild(table.firstChild); 
 
     } 
 

 
      /*checking out the result on click function*/ 
 
    //var a = document.getElementById('course_no').value; 
 
     for (var i = 0; i < a; i++){ 
 
     var ade = i + 1; 
 
     $("#course_code".concat(i + 1)).keyup(function() { 
 
      var course = document.getElementById("input#course_code".concat(ade)).value; 
 
      console.log(course); 
 
     }) 
 
     } 
 

 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-8"> 
 
     <p><h3>My School Result</h3></p> 
 
     <p>Please enter the number of courses in the box below</p> 
 
     <hr> 
 
     <div id="result"> 
 
      <div id="select_this"> 
 
      <form class="form-horizontal" method="post" id="course_number"> 
 
       <div class="form-group"> 
 
       <label for="level" class="col-md-4 control-label"><p>Level</p></label> 
 
       <div class="col-md-7"> 
 
        <select name="level" id="level" class="form-control"> 
 
        <option value="">SELECT LEVEL</option> 
 
        <option value="100 LEVEL">100 LEVEL</option> 
 
        <option value="200 LEVEL">200 LEVEL</option> 
 
        <option value="300 LEVEL">300 LEVEL</option> 
 
        <option value="400 LEVEL">400 LEVEL</option> 
 
        <option value="SPILL OVER">SPILL OVER</option> 
 
        </select> 
 
       </div> 
 
       </div> 
 
       <div class="form-group"> 
 
       <label for="semester" class="col-md-4 control-label"><p>Semester</p></label> 
 
       <div class="col-md-7"> 
 
        <select name="semester" id="semester" class="form-control"> 
 
        <option value="">SELECT SEMESTER</option> 
 
        <option value="FIRST SEMESTER">FIRST SEMESTER</option> 
 
        <option value="SECOND SEMESTER">SECOND SEMESTER</option> 
 
        <option value="FIRST SEMESTER SPILL">FIRST SEMESTER SPILL</option> 
 
        <option value="SECOND SEMESTER SPILL">SECOND SEMESTER SPILL</option> 
 
        </select> 
 
       </div> 
 
       </div> 
 
       <div class="form-group"> 
 
       <label for="course_no" class="col-md-4 control-label"><p>Number of Courses</p></label> 
 
       <div class="col-md-7"> 
 
        <input type="text" class="form-control" id="course_no" name="course_no" placeholder="How many courses did you want to create result for?"> 
 
       </div> 
 
       </div> 
 
       <div id="course_message"></div> 
 
       <div class="form-group"> 
 
       <div class="col-md-offset-2 col-md-10"> 
 
        <button type="button" onclick='createTable()' id="loop_course" class="btn btn-default">GO -></button> 
 
       </div> 
 
       </div> 
 
      </form> 
 
      </div> 
 
      <div id="table_result" style="display: none;"> 
 
      <form> 
 
       <div class="table-responsive"> 
 
       <table id="table" class="order-table table" name="table1" required> 
 

 
       </table> 
 
       <a href="#" class="btn btn-success">Submit Result</a> 
 
       <p></br></p> 
 
       <p></br></p> 
 
       <p></br></p> 
 
       </div> 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 1

使用だけのjQuery：

テーブルのすべてのTD上のループへ

 $('td[id^="course_code"]').on('keyup', function(){ 
     // Get the next td 
     var nextTd = $(this).next('td'); 
     // Get the Text inside of this td 
     var val = $('input[id^="course_code"]', nextId).val() 
     }); 

：

$('#table_result tr').each(function() { 
var course = $(this).find('td[id^="course_code"]').html(); 
}); 

の