用于向表中添加行的 javascript 代碼：
function addRow(tableId) {
console.log(tableId)
var table = document.getElementById(tableId);
var rowCount = table.rows.length;
var cellCount = table.rows[0].cells.length;
var row = table.insertRow(rowCount);
for(var i =0; i < cellCount; i ){
var cell = row.insertCell(i);
if(i < cellCount-1){
cell.innerHTML = '<select name="list[]">'
'<option value="a">a</option>'
'<option value="b">b</option>'
'</select>'
}else{
cell.innerHTML = '<input name="listValue[]" type="number" step = "any" value = 0>'
}
}
}
原始表的 EJS
<form action="/save" method="post">
<table class="table" id="table1">
<tbody>
<tr>
<td>
<select class="form-control" name="list[]">
<option value="a">a</option>
<option value="b">b</option>
</select>
</td>
<td>
<button type='button' class="btn btn-lg" onclick="addRow('table1')">Add Row</button>
</td>
<td>
<button type='submit' class="btn btn-lg">Save</button>
</td>
</tr>
</form>
</tbody>
</table>
運行 body-parser 和 Express 的 NodeJS 服務器
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const bodyParser = require('body-parser');
const open = require('open');
const fs = require('fs');
const prompt = require('prompt-async')
require('dotenv').config();
let cors = require("cors");
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }))
app.use(express.json())
app.engine('html', require('ejs').renderFile)
app.set('view engine', 'ejs')
//post request
app.post("/save", async (req, res) => {
console.log(req.body)
})
無需添加表格行，資料即可完美通過。一旦添加了一行，添加的行的資料不會被列印出來，只有頁面上的原始資料會列印出來。例如：如果選擇第一行“a”并添加新行并選擇“b”，則只會列印出值“a”。
預期的結果是在每一行列印出選定的值，而不是列印的資料僅來自原始 ejs 頁面，而不是來自使用 javascript 添加的行。我嘗試使用檢查元素手動編輯頁面，并且不會出現新元素。
編輯：我忘了提到名稱是陣列。每個選擇選項的值將存盤為一個陣列。例如，如果我有 a 和 b 行，list[] 將包含 [a, b]
uj5u.com熱心網友回復：
這段代碼沒有問題
我的實際問題是我在嵌套表 <form> 元素上包裝了一個表單，它不會在嵌套表中發送資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525214.html