title: How to make dynamic table save into Database SQL Javascript
body: <p>I do have Dynamic table but only for client side and I've try to make it save into database SQL Server. But i couldn't save into database. So, you guys have any logic to make these <code>javascript</code> save into database. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function add_row(data_table) {
    // make a new row 
    var new_Component = document.getElementById("new_Component").value;
    var new_KRA = document.getElementById("new_KRA").value;
    var new_KPI = document.getElementById("new_KPI").value;
    var new_SFA = document.getElementById("new_SFA").value;
    var new_Target = document.getElementById("new_Target").value;
    var new_Weightage = document.getElementById("new_Weightage").value;
  
  
    var table = document.getElementById("data_table");
    var table_len = (table.rows.length) - 1;
  
    var rowCount = table.rows.length;
    if (rowCount &gt;= 15) {
      document.getElementById("error").innerHTML = "You have reached the maximum. 12 only !"; // Message alert 
      setTimeout(function() {
        document.getElementById("error").innerHTML = "";
      }, 5000); // Message alert will dissaper after 5 second  // 5000 equal to 5 seconds
  
      return false;
    }
  
    //add row button
    var row = table.insertRow(table_len).outerHTML = "&lt;tr id='row" + table_len + "'&gt; \
   &lt;td id='Component_row" + table_len + "'&gt;" + new_Component + "&lt;/td&gt; \
   &lt;td id='KRA_row" + table_len + "'&gt;" + new_KRA + "&lt;/td&gt; \
   &lt;td id='KPI_row" + table_len + "'&gt;" + new_KPI + "&lt;/td&gt; \
   &lt;td id='SFA_row" + table_len + "'&gt;" + new_SFA + "&lt;/td&gt; \
   &lt;td id='Target_row" + table_len + "'&gt;" + new_Target + "&lt;/td&gt; \
   &lt;td id='Weightage_row" + table_len + "'&gt;" + new_Weightage + "&lt;/td&gt; \
   &lt;td&gt; \
   &lt;input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'&gt; \
   &lt;input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'&gt; \
   &lt;input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'&gt; \
   &lt;/td&gt; \
   &lt;/tr&gt;";
  
    document.getElementById("new_Component").value = "";
    document.getElementById("new_KRA").value = "";
    document.getElementById("new_KPI").value = "";
    document.getElementById("new_SFA").value = "";
    document.getElementById("new_Target").value = "";
    document.getElementById("new_Weightage").value = "";
  
  }
  
  
  function delete_row(no) //delete function 
  {
    document.getElementById("row" + no + "").outerHTML = "";
  }
  
  function edit_row(no) // edit function // HOW TO ADJUST THIS FUNCTION INTO ADD FUNCTION 
  {
    document.getElementById("edit_button" + no).style.display = "none";
    document.getElementById("save_button" + no).style.display = "block";
  
    var Component = document.getElementById("Component_row" + no);
    var KRA = document.getElementById("KRA_row" + no);
    var KPI = document.getElementById("KPI_row" + no);
    var SFA = document.getElementById("SFA_row" + no);
    var Target = document.getElementById("Target_row" + no);
    var Weightage = document.getElementById("Weightage_row" + no);
  
    var Component_data = Component.innerHTML;
    var KRA_data = KRA.innerHTML;
    var KPI_data = KPI.innerHTML;
    var SFA_data = SFA.innerHTML;
    var Target_data = Target.innerHTML;
    var Weightage_data = Weightage.innerHTML;
  
    Component.innerHTML = "&lt;input type='text' id='Component_text" + no + "' name='Component_text" + no + "' value='" + Component_data + "'&gt;";
    KRA.innerHTML = "&lt;input type='text' id='KRA_text" + no + "' name='KRA_text" + no + "' value='" + KRA_data + "'&gt;";
    KPI.innerHTML = "&lt;input type='text' id='KPI_text" + no + "' name='KPI_text" + no + "' value='" + KPI_data + "'&gt;";
    SFA.innerHTML = "&lt;input type='text' id='SFA_text" + no + "' name='SFA_text" + no + "' value='" + SFA_data + "'&gt;";
    Target.innerHTML = "&lt;input type='text' id='Target_text" + no + "' name='Target_text" + no + "' value='" + Target_data + "'&gt;";
    Weightage.innerHTML = "&lt;input type='text' id='Weightage_text" + no + "' id='Weightage_text" + no + "' value='" + Weightage_data + "'&gt;";
  }
  
  function save_row(no) // save function
  {
    var Component_val = document.getElementById("Component_text" + no).value;
    var KRA_val = document.getElementById("KRA_text" + no).value;
    var KPI_val = document.getElementById("KPI_text" + no).value;
    var SFA_val = document.getElementById("SFA_text" + no).value;
    var Target_val = document.getElementById("Target_text" + no).value;
    var Weightage_val = document.getElementById("Weightage_text" + no).value;
  
    document.getElementById("Component_row" + no).innerHTML = Component_val;
    document.getElementById("KRA_row" + no).innerHTML = KRA_val;
    document.getElementById("KPI_row" + no).innerHTML = KPI_val;
    document.getElementById("SFA_row" + no).innerHTML = SFA_val;
    document.getElementById("Target_row" + no).innerHTML = Target_val;
    document.getElementById("Weightage_row" + no).innerHTML = Weightage_val;
  
    document.getElementById("edit_button" + no).style.display = "block";
    document.getElementById("save_button" + no).style.display = "none";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Create a layout of Section B - KPI Planning&lt;/title&gt;
    &lt;style&gt;
      body {}
      
      p {
        font-family: Calibri;
        font-size: 12px;
      }
      
      select {
        font-family: Calibri;
      }
      
      table {
        width: 80%;
        border-collapse: collapse;
        font-family: Calibri;
        font-size: 12px;
        margin: 0 auto;
      }
      
      tr,
      td {
        border: solid black 1px;
        align: center;
        text-align: center;
      }
      
      input {
        width: 100%;
        font-family: calibri;
      }
      
      textarea {
        font-family: Calibri;
        width: auto;
      }
      
      .button {
        width: 8%
      }
      
      .success {
        background-color: #ddffdd;
        border-left: 5px solid #4CAF50;
      }
      
      .limit {
        background-color: #FFCACA;
        border-left: 5px solid #FF0000;
      }
    &lt;/style&gt;
  
    &lt;script&gt;
      function savebtn() {
        document.getElementById("alert").innerHTML = "Data insert successfully!"; // this message will display as Alert !!
        setTimeout(function() {
          document.getElementById("alert").innerHTML = "";
        }, 5000); // this function will make the message alert will dissapear
      }
    &lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;br&gt;
  
  
    &lt;!--- Javascript Alert messages : success ---&gt;
    &lt;p class="success" align="center" style="font-weight:bold" id="alert"&gt;&lt;/p&gt;
    &lt;!--- Javascript Alert messages : success ---&gt;
  
    &lt;!--- Javascript Alert messages : error ---&gt;
    &lt;p class="limit" align="center" style="font-weight:bold" id="error"&gt;&lt;/p&gt;
    &lt;!--- Javascript Alert messages : error ---&gt;
  
    &lt;table id="data_table"&gt;
  
      &lt;form action="" method="post"&gt;
  
        &lt;!--- Row Title ---&gt;
        &lt;tr style="color:White;" bgcolor="#0C457F"&gt;
          &lt;td&gt;Component&lt;/td&gt;
          &lt;td&gt;KRA&lt;/td&gt;
          &lt;td&gt;KPI&lt;/td&gt;
          &lt;td bgcolor="black"&gt;SFA&lt;/td&gt;
          &lt;td&gt;Target&lt;/td&gt;
          &lt;td bgcolor="black"&gt;Weightage %&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!--- Row Title end ---&gt;
  
  
  
        &lt;!--- Add new row ---&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="text" id="new_Component"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="new_KRA"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="new_KPI"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="new_SFA"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;!--- How to make dropdown ---&gt;
          &lt;td&gt;&lt;input type="text" id="new_Target"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;input type="text" id="new_Weightage"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;!--- How to make dropdown ---&gt;
  
          &lt;td&gt;&lt;input type="button" value="Add Row" class="add" onClick="add_row('data_table')" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;p&gt;&lt;/p&gt;
  
        &lt;tr&gt;
          &lt;td colspan="5"&gt;&lt;/td&gt;
          &lt;td&gt;GRAND TOTAL : 100%&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;!--- Add new row end ---&gt;
  
    &lt;/table&gt;
    &lt;p align="center"&gt;
      &lt;input class="button" type="Submit" value="Save" onclick="savebtn()"&gt;
    &lt;/p&gt;
  
    &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>