在 HTML 表格中输入数据答案

【问题标题】：Entering data into an HTML table在 HTML 表格中输入数据
【发布时间】：2021-04-22 13:48:36
【问题描述】：

我首先说我有一个网页，其中有我输入数据的文本区域。还有一个按钮，通过它我应该将输入的数据写入数据库的表格中，并在另一个网页的表格中显示相同的数据。现在，第一部分，即在我能够完成的数据库上写入数据，但第二部分没有。有人可以帮助我吗？下面我将介绍 HTML、JavaScript 和 C# 服务器端它们可能很有用。

HTML

<body>
    <form id="form1" runat="server">
        <div>
            <button id ="Aggiungi" class="button2" onclick="redirect()">+</button>
        </div>
        <br />
        <br />
        <table id= "tabel" class="display">
            <thead>
                <tr>
                    <th id ="col">NOME</th><th id ="col">COGNOME</th>
                    <th id ="col">AZIENDA</th>
                    <th id ="col">PROVINCIA</th>
                </tr>
            </thead>
        </table>  

        <br/>
    </form>
</body>

JavaScript

function add() {       
     let nom = document.getElementById("nome").value;
     let cognom = document.getElementById("cognome").value;
     let aziend = document.getElementById("azienda").value;
     let provincia = document.getElementById("provincia").value;        

    if ((nom == "") || (nom == "undefined") || (cognom == "") || (cognom == "undefined") || (aziend == "") || (aziend == "undefined") || (provincia == "") || (provincia == "undefined")) {

        alert("Inserire i dati per favore");            
    } else {  
        let dati = { nome: nom, cognome: cognom, azienda: aziend, provin: provincia };
        
         $.ajax({
             type: "POST",
             url: "user-form.aspx/ScriviDati",
             data: JSON.stringify(dati),
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             global: false,
             async: false,
             success: function (a) {

                 console.log(a.d);
                 alert("Perfetto")
             },

             fail: function (response) {
                 alert("Qualcosa è andato storto");
             }
         });
    }
}

public static void ScriviDati (string nome, string cognome, string azienda, string provin)
{
    string queryString = "INSERT Elenco (Nome, Cognome, Azienda, Provincia) VALUES (@Nome, @Cognome, @Azienda, @Provincia)";

    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["coso"].ConnectionString))
    {
        connection.Open();

        using (SqlCommand command = new SqlCommand(queryString, connection))
        {
            SqlParameter parameter = new SqlParameter("Nome", nome);
            SqlParameter parameter2 = new SqlParameter("Cognome", cognome);
            SqlParameter parameter3 = new SqlParameter("Azienda", azienda);
            SqlParameter parameter4 = new SqlParameter("Provincia", provin);
            command.Parameters.Add(parameter);
            command.Parameters.Add(parameter2);
            command.Parameters.Add(parameter3);
            command.Parameters.Add(parameter4);
            command.ExecuteNonQuery();
            connection.Close();
        }
    }
}

【问题讨论】：

我能看到的唯一按钮调用redirect()，而不是add()
是的，我知道，这是我想在其上插入传入数据的另一个 html 页面上的表格。该按钮与问题完全无关

标签： javascript c# html

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table id="tabel" class="display">
      <thead>
        <tr>
          <th id="col">A</th>
          <th id="col">B</th>
          <th id="col">C</th>
          <th id="col">D</th>
        </tr>
      </thead>
    </table>
  </body>
  <script>
    window.onload = function () {
      const data = [
        { A: 1, B: 2, C: 3, D: 4 },
        { A: 1, B: 2, C: 3, D: 4 },
        { A: 1, B: 2, C: 3, D: 4 },
        { A: 1, B: 2, C: 3, D: 4 },
      ];

      const table = document.querySelector("table");
      data.forEach((item, index) => {
        let tr = document.createElement("tr");

        for (const key in item) {
          let td = document.createElement("td");
          td.innerText = item[key];
          tr.appendChild(td);
        }
        table.appendChild(tr);
      });
    };
  </script>
</html>

【讨论】：