Javascript, html

Question

I created a table dynamically from an input field using Javascript. If the user put in 3 and click on go, a table is created with 3 rows.

I used the .keyup function to target a cloumn and it worked. The problem is that var x = $("#inputfieldid").val() returns only value for the last row while other rows return empty.

/*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

Use just 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()
        });

to Loop on all TD of the table:

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