Javascript: заполнение строк / ячеек таблицы, и новые данные не перезаписывают существующие данные ячейки

#javascript

#javascript

Вопрос:

У меня возникли проблемы с получением скрипта для заполнения нескольких строк / ячеек запрашиваемыми входными данными. Мне также нужно динамически добавлять строки и запрашивать ввод пользовательских данных, а не перезаписывать существующие ячейки этими новыми данными, а заполнять новые строки / ячейки этими данными.

Я был бы признателен за предложения, которые помогут мне понять, чего мне не хватает и что я делаю неправильно. Я в значительной степени новичок, работающий с javascript.

Часть кода ниже:

 //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  = "nTD 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--;
            }
          }
        }
      }
    } 

Комментарии:

1. В чем проблема с вашим кодом?

2. функция «insertData» добавляет данные только в одну строку (первую строку), кажется, я не могу заставить ее перебирать дополнительные строки «td».

3. Кроме того, я использую функцию «RowCounts» в качестве метода отладки / устранения неполадок / тестирования для проверки количества строк ‘tr / td’ и удалю код после того, как он будет работать правильно.