innerHTML issue - unable to fill row by row

Don Dom · ‎12-30-2024

Hello Dear's

I have UI PAGE:

<html>
  <head>
    <script type="text/javascript">
      function addRow() {
        var table = document.getElementById("dynamicTable");
        var row = table.insertRow(table.rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
       
        cell1.innerHTML = '<input type="text" name="name" placeholder="Select Survey:"></input>';
        cell2.innerHTML = '<input type="text" name="email" placeholder="Select User:"></input>';
        cell3.innerHTML = '<button type="button" onclick="removeRow(this)">Remove</button>';
      }
 
      function removeRow(button) {
        var row = button.parentNode.parentNode;
        row.parentNode.removeChild(row);
      }
    </script>
  </head>
  <body>
    <h1>Send Risk Assessment Surveys !!</h1>
    <table id="dynamicTable" border="1">
      <thead>
        <tr>
          <td style="width:20%"><g:form_label>Select Survey:</g:form_label></td>
<td style="width:40%"><g:ui_reference name="user_ref" id="user_ref" query="metric_type.evaluation_method=assessment" table="asmt_metric"/></td>
 
          <td style="width:20%">
            <g:form_label>
            Select User:
            </g:form_label>    
                  </td>
          <td style="width:40%">
            <g:ui_reference name="survey_ref" id="survey_ref" query="user_nameSTARTSWITHa" table="sys_user"  />
                   </td>
         
        </tr>
      </thead>
      <tbody>
        <!-- Dynamic rows will be added here -->
      </tbody>
    </table>
    <table id="dynamicTable" border="1">
      <thead>
        <tr>
          <td style="width:20%"><g:form_label>Select Survey:</g:form_label></td>
<td style="width:40%"><g:ui_reference name="user_ref" id="user_ref" query="metric_type.evaluation_method=assessment" table="asmt_metric"/></td>
 
          <td style="width:20%">
            <g:form_label>
            Select User:
            </g:form_label>    
                  </td>
          <td style="width:40%">
            <g:ui_reference name="survey_ref" id="survey_ref" query="user_nameSTARTSWITHa" table="sys_user"  />
             </td>
         </tr>
      </thead>
      <tbody>
        <!-- Dynamic rows will be added here -->
      </tbody>
    </table>
    <button type="button" onclick="addRow()">Add Row</button>
  </body>
</html>

I want to be able to ADD row by row with user and metric, but it does not work for me:

Something wrong with innerHTML

        cell1.innerHTML = '<input type="text" name="name" placeholder="Select Survey:"></input>';
        cell2.innerHTML = '<input type="text" name="email" placeholder="Select User:"></input>';
        cell3.innerHTML = '<button type="button" onclick="removeRow(this)">Remove</button>';

Please advise.

Thx

Ankur Bawiskar · ‎12-30-2024

@Don Dom

how should it look like?

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Ankur Bawiskar · ‎12-30-2024

@Don Dom

try this once

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function addRow() {
      var table = document.getElementById("dynamicTable");
      var tbody = table.getElementsByTagName("tbody")[0];
      var row = tbody.insertRow(tbody.rows.length);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);

      cell1.innerHTML = '<input type="text" name="name" placeholder="Select Survey:">';
      cell2.innerHTML = '<input type="text" name="email" placeholder="Select User:">';
      cell3.innerHTML = '<button type="button" onclick="removeRow(this)">Remove</button>';
    }

    function removeRow(button) {
      var row = button.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  </script>
</head>
<body>
  <h1>Send Risk Assessment Surveys !!</h1>
  <table id="dynamicTable" border="1">
    <thead>
      <tr>
        <td style="width:20%"><g:form_label>Select Survey:</g:form_label></td>
        <td style="width:40%"><g:ui_reference name="user_ref" id="user_ref" query="metric_type.evaluation_method=assessment" table="asmt_metric"/></td>
        <td style="width:20%"><g:form_label>Select User:</g:form_label></td>
        <td style="width:40%"><g:ui_reference name="survey_ref" id="survey_ref" query="user_nameSTARTSWITHa" table="sys_user"/></td>
      </tr>
    </thead>
    <tbody>
      <!-- Dynamic rows will be added here -->
    </tbody>
  </table>
  <button type="button" onclick="addRow()">Add Row</button>
</body>
</html>

Key Changes done:
1) Single Table: Combined the two tables into one to avoid confusion.
2) Target tbody: The addRow function now correctly targets the tbody of the table to insert new rows.
3) Unique IDs: Ensured the table ID is unique.

If my response helped please mark it correct and close the thread so that it benefits future readers.

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Don Dom · ‎12-31-2024

Nope, still the same:

in ROW 1 you can choose user and survery

in ROW 2 is empty no possible to choose from the list

Ankur Bawiskar · ‎12-31-2024

@Don Dom

did you try to playaround with the html?

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader