Javascript: Populate rows/cells of a table and new data does not overwrite existing cell data

Question

I am have trouble getting the script to populate multiple rows/cells with the prompted input data. I also need to add rows dynamically and prompt for user data input and not overwrite the existing cells with this new data but populate the new rows/cells with this data.

I would appreciate suggestions to help me understand what I am missing and not doing correctly. I am pretty much a noop working with javascript.

Some of the code below:

//receives table id
function adRowsTable(id) {
  var table = document.getElementById(id);
  var me = this;
  if (document.getElementById(id)) {
    var row2 = table.rows[2].outerHTML;

    //adds index-id in cols with class .tbl_id
    function setIds() {
      var new_cg_tbl = document.querySelectorAll('#' + id + ' .new_cg_tbl');
      for (var i = 0; i < new_cg_tbl.length; i++) new_cg_tbl[i].innerHTML = i + 1;
    }

    //add row after clicked row; receives clicked button in row
    me.addRow = function(btn) {

      // document.getElementById('record_id_td').innerHTML = record_id;
      //var sr_number = prompt('SR Number', '');
      // var host_asset_num = prompt('Host Asset Number', '');
      // var host_name = prompt('Host Name', '');

      btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row2) :
        table.insertAdjacentHTML('beforeend', row2);

      setIds();

    }

    function addData() {
      // var new_cg_tbl = document.querySelectorAll('#'+ id + ' .new_cg_tbl');
      // for(var i=0; i<new_cg_tbl.length; i++) new_cg_tbl[i].innerHTML = i+1;

      // var sr_number = prompt('Service Request Number', '');
      var table = document.getElementById('new_cg_tbl');
      //var tableRows = document.getElementByID('new_cg_tbl').rows;
      var td_Rows = table.getElementsByTagName("td").rows;
      var totalRowCount = 0;
      var td_rowCount = 0;
      var Num_Cells = 0;

      RowCounts();
    }
    // Get the number of existing Table Data (td) rows
    function RowCounts() {
      var table = document.getElementById('new_cg_tbl');
      var totalRowCount = 0;
      var rowCount = 0;
      var rows = table.getElementsByTagName("tr")
      for (var i = 0; i < rows.length; i++) {
        totalRowCount++;
        if (rows[i].getElementsByTagName("td").length > 0) {
          rowCount++;
        }
      }
      var message = "Total Row Count: " + totalRowCount;
      message += "
TD Row Count: " + rowCount;
      alert(message);
      insertData();

      function insertData() {

        var cell_rid = document.getElementById('record_id_td');
        var cell_sr_num = document.getElementById('sr_number_td');
        var cell_hasset = document.getElementById('host_asset_num_td');
        var cell_hname = document.getElementById('host_name_td');

        var record_id = prompt('Record ID', '');
        var sr_number = prompt('Service Request Number', '');
        var host_asset_num = prompt('Host Asset Number', '');
        var host_name = prompt('Host Name', '');


        for (var i = 0; i < rows.length; i++) {
          if (rows[i].getElementsByTagName('td').length > 0 - 1) {
            while (rowCount > 0) {
              cell_rid.textContent = record_id;

              rowCount--;
            }
          }
        }
      }
    }

Answer 1

等待大神答复