【发布时间】：2019-06-06 03:31:27
【问题描述】：
我有一个 HTMl 表，其中一列是 editable 我想将该数据插入到我的数据库中。
- 首先是我正在运行的 sn-p。
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>所以在我的 sn-p 中，我有一个 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。
- 之后我得到了一个插座，但在数据库中我必须像行一样插入它，所以我必须循环它。
-
important at
UI我只需要保存数量 > 0 的行 - 如果用户希望所有 4 行中的第 3 行数量为
0，则无需保存。 - 我在网上搜索了几个示例，但没有找到理想的解决方案，因为我使用的是
contenteditable而不是<input type=text，所以无法找到如何将此表保存到数据库中
【问题讨论】：
-
@mplungjan 你能帮我写代码吗..这里我使用
contenteditable使表格的内容可编辑
标签： javascript java jquery mysql servlets