如何将HTML表数据插入数据库
我有一个HTMl表，其中一列是editable，我想将该数据插入到我的数据库中。
- 首先是我正在运行的代码段。
var tableData = [{
"Item Code": "C001",
"Item Name": "Beverages",
"Quantity": "0"
},
{
"Item Code": "C003",
"Item Name": "Juices",
"Quantity": "0"
},
{
"Item Code": "C004",
"Item Name": "Soups",
"Quantity": "0"
},
{
"Item Code": "C005",
"Item Name": "Cookies",
"Quantity": "0"
},
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
}
if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
}
if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
tabCell.setAttribute('contenteditable', true);
tabCell.innerHTML = tabledata;
}
/* else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
} */
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableData);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<form action="InsertQuantityIndent" method="post" id="form1">
<div class="container" align="center">
<div class="row">
<div class="col-lg-12">
<h6>OUTLET :</h6>
<select name="outlet">
<option>S001</option>
<option>S002</option>
<option>S003</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-12 table table-responsive" style="margin-bottom: 1px;">
<table id="HourlysalesSummary"></table>
</div>
</div>
<div>
<button type="submit" class="btn btn-success" id="save">
<i class="fas fa-save"></i> Save
</button>
<button type="submit" class="btn btn-warning" id="clear">
<i class="fas fa-eraser"></i> Clear
</button>
</div>
</div>
</form>
因此，在我的代码段中，我有一个HTML表，该表外有一个下拉列表。
-
Quantity是可编辑的 - 单击“保存”后，我想使用插座名称将数据保存到我的数据库中
- 因此在我的服务器代码上，我很容易获得选择哪个出口的信息，但没有获得表的数据
- 我不知道如何将表数据获取到
save上的服务器端 - 我也想通过服务器端的出口循环数据
这是我的java servlet代码。
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String outlet = request.getParameter("outlet");
System.out.println(outlet);
try {
con = DBConnection.createConnection();
statement = con.createStatement();
String query = "insert into student values(?,?,?,?)";
PreparedStatement ps = con.prepareStatement(query);
ps.setInt(1, ItemCode);
ps.setString(2, Quantity);
ps.setString(3, outlet);
ps.executeUpdate();
System.out.println("successfuly inserted");
} catch (SQLException e) {
e.printStackTrace();
}
RequestDispatcher rd = request.getRequestDispatcher("home.jsp");
rd.forward(request, response);
}
我的数据库应该看起来像
我知道该怎么做，但是我面临的问题是
- 如何将表条目获取到服务器端，即通过servlet。
- 然后我得到一个出口，但是在数据库中我必须像在行中那样插入它，所以我必须循环它。
- 重要，位于
UI，我只需要保存数量大于0的行 - 如果用户希望从所有4行中将第3行数量设为
0，则无需保存。 - 我已经在网上搜索了几个示例，但未找到理想的解决方案，因为我使用的是
contenteditable而不是<input type=text，因此无法找到如何将此表保存到db
1 个答案:
答案 0 :(得分：0)
由于未使用form element而遇到的问题。 Form Element
如您所见，选择元素是表单元素，因此唯一的选择元素数据将发送到服务器。
我修改了您的代码，以便它可以将所有数据发送到服务器。
某些CSS可能不匹配，但是我没有机会正确添加CSS；希望您能自己解决这个问题。
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<form action="InsertQuantityIndent" method="post" id="form1">
<div class="container" align="center">
<div class="row">
<div class="col-lg-12">
<h6>OUTLET :</h6>
<select name="outlet">
<option>S001</option>
<option>S002</option>
<option>S003</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-12 table table-responsive" style="margin-bottom: 1px;">
<table id="HourlysalesSummary"></table>
</div>
</div>
<div>
<button type="submit" class="btn btn-success" id="save">
<i class="fas fa-save"></i> Save
</button>
<button type="submit" class="btn btn-warning" id="clear">
<i class="fas fa-eraser"></i> Clear
</button>
</div>
</div>
</form>
<script>
var tableData = [{
"Item Code": "C001",
"Item Name": "Beverages",
"Quantity": "0"
},
{
"Item Code": "C003",
"Item Name": "Juices",
"Quantity": "0"
},
{
"Item Code": "C004",
"Item Name": "Soups",
"Quantity": "0"
},
{
"Item Code": "C005",
"Item Name": "Cookies",
"Quantity": "0"
},
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
let tabCell = tr.insertCell(-1);
var hiddenField = document.createElement("input");
hiddenField.style.display = "none";
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Code');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
tabCell.innerHTML = tabledata;
hiddenField.setAttribute('name', 'Item_Name');
hiddenField.setAttribute('value', tabledata);
tabCell.appendChild(hiddenField);
}
if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
var quantityField = document.createElement("input");
quantityField.style.border = "none";
quantityField.style["text-align"] = "center";
quantityField.setAttribute('name', 'Quantity');
quantityField.setAttribute('value', tabledata);
tabCell.appendChild(quantityField);
}
/* else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
} */
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableData);
</script>
</html>
有许多方法可以将数据发送到服务器。您想要的所有验证都只能在服务器端进行。
第二种方法是使用prevent Default来停止表单的默认提交行为。 Prevent Default然后使用JavaScript获取所有表数据并执行验证和操作，然后发送回服务器。
目前，上述解决方案正在工作，看看吧。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？