如何将动态表保存到Database SQL Javascript中

Question

我有动态表，但仅用于客户端，我尝试将其保存到数据库SQL Server中。但我无法保存到数据库中。所以，你们有任何逻辑可以将这些javascript保存到数据库中。

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 >= 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 = "<tr id='row" + table_len + "'> \
 <td id='Component_row" + table_len + "'>" + new_Component + "</td> \
 <td id='KRA_row" + table_len + "'>" + new_KRA + "</td> \
 <td id='KPI_row" + table_len + "'>" + new_KPI + "</td> \
 <td id='SFA_row" + table_len + "'>" + new_SFA + "</td> \
 <td id='Target_row" + table_len + "'>" + new_Target + "</td> \
 <td id='Weightage_row" + table_len + "'>" + new_Weightage + "</td> \
 <td> \
 <input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> \
 <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> \
 <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'> \
 </td> \
 </tr>";

  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 = "<input type='text' id='Component_text" + no + "' name='Component_text" + no + "' value='" + Component_data + "'>";
  KRA.innerHTML = "<input type='text' id='KRA_text" + no + "' name='KRA_text" + no + "' value='" + KRA_data + "'>";
  KPI.innerHTML = "<input type='text' id='KPI_text" + no + "' name='KPI_text" + no + "' value='" + KPI_data + "'>";
  SFA.innerHTML = "<input type='text' id='SFA_text" + no + "' name='SFA_text" + no + "' value='" + SFA_data + "'>";
  Target.innerHTML = "<input type='text' id='Target_text" + no + "' name='Target_text" + no + "' value='" + Target_data + "'>";
  Weightage.innerHTML = "<input type='text' id='Weightage_text" + no + "' id='Weightage_text" + no + "' value='" + Weightage_data + "'>";
}

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";
}

<!doctype html>
<html>

<head>
  <title>Create a layout of Section B - KPI Planning</title>
  <style>
    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;
    }
  </style>

  <script>
    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
    }
  </script>

  <script type="text/javascript"></script>

</head>

<body>

  <br>


  <!--- Javascript Alert messages : success --->
  <p class="success" align="center" style="font-weight:bold" id="alert"></p>
  <!--- Javascript Alert messages : success --->

  <!--- Javascript Alert messages : error --->
  <p class="limit" align="center" style="font-weight:bold" id="error"></p>
  <!--- Javascript Alert messages : error --->

  <table id="data_table">

    <form action="" method="post">

      <!--- Row Title --->
      <tr style="color:White;" bgcolor="#0C457F">
        <td>Component</td>
        <td>KRA</td>
        <td>KPI</td>
        <td bgcolor="black">SFA</td>
        <td>Target</td>
        <td bgcolor="black">Weightage %</td>
      </tr>
      <!--- Row Title end --->



      <!--- Add new row --->
      <tr>
        <td><input type="text" id="new_Component"></input>
        </td>
        <td><input type="text" id="new_KRA"></input>
        </td>
        <td><input type="text" id="new_KPI"></input>
        </td>
        <td><input type="text" id="new_SFA"></input>
        </td>
        <!--- How to make dropdown --->
        <td><input type="text" id="new_Target"></input>
        </td>
        <td><input type="text" id="new_Weightage"></input>
        </td>
        <!--- How to make dropdown --->

        <td><input type="button" value="Add Row" class="add" onClick="add_row('data_table')" /></td>
      </tr>

      <p></p>

      <tr>
        <td colspan="5"></td>
        <td>GRAND TOTAL : 100%</td>
      </tr>

      <!--- Add new row end --->

  </table>
  <p align="center">
    <input class="button" type="Submit" value="Save" onclick="savebtn()">
  </p>

  </form>

</body>

</html>