如何插入HTML表中的数据到数据库

问题描述 投票：-1回答：1

我有一个HTML表，其中一列是editable我想这些数据插入到我的数据库。

  1. 首先，这里是我的跑步片段。

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表格。

  1. Quantity是可编辑的
  2. 在点击保存我希望将数据保存到我的数据库与插座名称
  3. 因此，作为对我的服务器代码，我很容易得到选择哪个出口，但没有得到表的数据
  4. 我不知道如何让表中的数据上save我的服务器端
  5. 同时，我想环路与我出口的数据在服务器端

这是我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);
      }

我的数据库应该看起来像

This is how my database will look like after inserting the data

我知道该怎么做，但我面对的问题是

  1. 如何获得表条目，以服务器端即在servlet的。
  2. 而在这之后我收到一个出口，但在数据库中，我不得不将其插入像行，所以我必须要循环播放。
  3. 在UI重要的我要救仅拥有量> 0的行
  4. 如果所有4行用户希望第3行量为0所以没有必要保存。
  5. 我已经寻找网络上的几个例子，但没有找到一个理想的解决方案，我用的contenteditable不<input type=text，所以无法找到如何将此表保存到数据库
javascript java jquery mysql servlets
1个回答
0
投票

这个问题你是因为你不使用表单元素得到。 Form Element

正如你所看到的select元素是表单元素所以只能选择元素数据将服务器。

我修改您的代码，以便它可以所有的数据发送到服务器。

一些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然后使用JavaScript来获取所有表数据和执行验证和处理，然后发送回服务器。

目前，上述解决方案的工作，一起来看看。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.