Как вставить данные таблицы HTML в базу данных

Question

У меня есть таблица 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);
      }

Моя база данных должна выглядеть как

Я знаю, как это сделать, но проблема, с которой я сталкиваюсь, -

1. Как получить записи таблицы в конец сервера, т. Е. В сервлете.
2. И после этого я получаю одну розетку, но в базу данных я должен вставить ее, как в строке, поэтому я должен зациклить ее.
3. важно в UI Я должен сохранить только те строки, количество которых> 0
4. Если из всех 4-х строк пользователь хочет, чтобы количество в 3-й строке составило 0, поэтому не нужно его сохранять.
5. Я искал несколько примеров в Интернете, но не нашел желаемого решения, так как использую contenteditable, а не <input type=text, поэтому не смог найти способ сохранить эту таблицу в db

Answer 1

Проблема, которую вы получаете, потому что вы не используете элемент формы. Элемент формы

Как вы можете видеть, элемент select является элементом формы, поэтому единственные данные элемента 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>

Существует много способов отправки данных на сервер. здесь вся проверка, которую вы хотите, вы можете сделать только на стороне сервера.

Второй подход - использовать предотвращение по умолчанию, чтобы остановить форму отправки по умолчанию. Предотвращение по умолчанию Затем используйте JavaScript, чтобы получить все данные таблицы и выполнить проверку и манипулирование, а затем отправить обратно на сервер.

Пока вышеприведенное решение работает, посмотрите.