Javascript，html

Question

我使用Javascript動態地從輸入字段創建了一個表。如果用戶輸入3並點擊去，則會創建一個3行的表格。

我用.keyup功能靶向cloumn和它的工作。問題是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[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() 
     }); 

到環路上表中的所有TD：

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