javascript - 在 HTML 表格中输入数据
问题描述
我首先说我有一个网页,其中有我输入数据的文本区域。还有一个按钮,通过它我应该将输入的数据写入数据库的表格中,并在另一个网页的表格中显示相同的数据。现在,第一部分,即在我能够完成的数据库上写入数据,但第二部分没有。有人可以帮助我吗?下面我将向您介绍 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");
}
});
}
}
C#
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();
}
}
}
解决方案
<!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>
推荐阅读
- dynamics-crm - 无法使用 OData 端点检索选定的查找
- .net - .Net 多线程访问/更改函数中的局部变量
- python-3.x - 更高效的多变量可视化
- amazon-web-services - 使用云前端或 s3 存储桶的每个边缘位置的成本是否有所不同?
- windows - Powershell 脚本清理活动
- android - 我如何在本地添加 ButterKnife(无远程依赖项)
- javascript - Datatable - 如何仅在搜索不为空时搜索和导出数据
- json - Ruby - 将对象映射到一个具有固定键的数组的最佳方法
- amazon-web-services - 使用 AWS-CLI 修改现有 AWS 警报
- html - 隐藏 div,如果 div 为空