此代码成功运行..但我的问题是，我需要添加一个带有保存按钮的函数，该按钮将以csv.file格式保存此表单。我怎么能这样做？可以做什么修改让我可以满足我的要求。我会发布整个代码..请帮助我... TQ
<form="form1" action="process.csv" method="post">
<div> TESTER <input type="text"/>
DATE<input type="text" />
EMP NO <input type="text" />
6S DONE <input type="text" />
<br />
<br />
WW <input type="text" size="8"maxlength="8"/>
NAME <input type="text" />
SHIFT<input type="text" />
<br />
<br />
<br />
</div>
PASSOVER (Please verify Summit Receipe & Storm before start shift)
<br />
<br />
<br />
Summit Receipe OK ?
<select name="">
<option value="" style="display:none;"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
Motif/ Storm OK ?
<select name="">
<option value="" style="display:none;"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br />
<br />
<br />
<SCRIPT TYPE="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// insert cell
var cellRight1 = row.insertCell(2);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'txtRow' + iteration;
el1.id = 'txtRow' + iteration;
el1.size = 40;
el1.onkeypress = keyPressTest;
cellRight1.appendChild(el1);
// insert cell
var cellRight2 = row.insertCell(3);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'txtRow' + iteration;
el2.id = 'txtRow' + iteration;
el2.size = 40;
el2.onkeypress = keyPressTest;
cellRight2.appendChild(el2);
// insert cell
var cellRight3 = row.insertCell(4);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtRow' + iteration;
el3.id = 'txtRow' + iteration;
el3.size = 40;
el3.onkeypress = keyPressTest;
cellRight3.appendChild(el3);
// insert cell
var cellRight4 = row.insertCell(5);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'txtRow' + iteration;
el4.id = 'txtRow' + iteration;
el4.size = 40;
el4.onkeypress = keyPressTest;
cellRight4.appendChild(el4);
// insert cell
var cellRight5 = row.insertCell(6);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'txtRow' + iteration;
el5.id = 'txtRow' + iteration;
el5.size = 40;
el5.onkeypress = keyPressTest;
cellRight5.appendChild(el5);
// insert cell
var cellRight6 = row.insertCell(7);
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'txtRow' + iteration;
el6.id = 'txtRow' + iteration;
el6.size = 40;
el6.onkeypress = keyPressTest;
cellRight6.appendChild(el6);
// insert cell
var cellRight7 = row.insertCell(8);
var el7 = document.createElement('input');
el7.type = 'text';
el7.name = 'txtRow' + iteration;
el7.id = 'txtRow' + iteration;
el7.size = 40;
el7.onkeypress = keyPressTest;
cellRight7.appendChild(el7);
// insert cell
var cellRight8 = row.insertCell(9);
var el8 = document.createElement('input');
el8.type = 'text';
el8.name = 'txtRow' + iteration;
el8.id = 'txtRow' + iteration;
el8.size = 40;
el8.onkeypress = keyPressTest;
cellRight8.appendChild(el8);
}
function keyPressTest(e, obj){
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
}
else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}
function removeRowFromTable(){
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function openInNewWindow(frm){
// open a blank window
var aWindow = window.open('', 'TableAddRowNewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRowNewWindow';
// submit
frm.submit();
}
function validateRow(frm){
var chkb = document.getElementById('chkValidate');
if (chkb.checked) {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length - 1;
var i;
for (i=1; i<=lastRow; i++) {
var aRow = document.getElementById('txtRow' + i);
if (aRow.value.length <= 0) {
alert('Row ' + i + ' is empty');
return;
}
}
}
openInNewWindow(frm);
}
</SCRIPT>
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Delete" onclick="removeRowFromTable();" />
</p>
<p>
</p>
<table border="1" id="tblSample">
<tr>
<TH>Num</TH>
<TH>Lot Number</TH>
<TH>Location</TH>
<TH>Total In</TH>
<TH>1 * Test</TH>
<Th>2 * Test</TH>
<TH>3 * Test</TH>
<TH>Total Out</TH>
<TH>Lot Status</TH>
<TH>Remark</TH>
很抱歉很长的帖子..如果你们认为这个编码应该得到改善。请让我知道
答案 0 :(得分：1)
所以 - 首先要确保相应的表单元素具有名称属性。
然后你可以做这样的事情来创建逗号分隔的字符串：
var returnStringColHeaders, returnStringColValues, returnString = '';
var names = [];
var vals = [];
$.each($('#myForm').serializeArray(), function (i, field) {
names.push(field.name);
vals.push(field.value);
});
for (var i = 0; i < names.length; i++) {
returnStringColHeaders = returnStringColHeaders + ', ' + names[i];
returnStringColValues = returnStringColValues + ', ' + vals[i];
}
returnString = returnStringColHeaders + '\n' + returnStringColValues;
//do something with returnString
console.log(returnString);
然后，您可以将returnString发布到某个页面，该页面将该字符串作为CSV发送回客户端作为下载。
答案 1 :(得分：0)
让我们从改进代码开始。
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
// insert cell
var cellRight1 = row.insertCell(2);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'txtRow' + iteration;
el1.id = 'txtRow' + iteration;
el1.size = 40;
el1.onkeypress = keyPressTest;
cellRight1.appendChild(el1);
// insert cell
var cellRight2 = row.insertCell(3);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'txtRow' + iteration;
el2.id = 'txtRow' + iteration;
el2.size = 40;
el2.onkeypress = keyPressTest;
cellRight2.appendChild(el2);
// insert cell
var cellRight3 = row.insertCell(4);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtRow' + iteration;
el3.id = 'txtRow' + iteration;
el3.size = 40;
el3.onkeypress = keyPressTest;
cellRight3.appendChild(el3);
// insert cell
var cellRight4 = row.insertCell(5);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'txtRow' + iteration;
el4.id = 'txtRow' + iteration;
el4.size = 40;
el4.onkeypress = keyPressTest;
cellRight4.appendChild(el4);
// insert cell
var cellRight5 = row.insertCell(6);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'txtRow' + iteration;
el5.id = 'txtRow' + iteration;
el5.size = 40;
el5.onkeypress = keyPressTest;
cellRight5.appendChild(el5);
// insert cell
var cellRight6 = row.insertCell(7);
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'txtRow' + iteration;
el6.id = 'txtRow' + iteration;
el6.size = 40;
el6.onkeypress = keyPressTest;
cellRight6.appendChild(el6);
// insert cell
var cellRight7 = row.insertCell(8);
var el7 = document.createElement('input');
el7.type = 'text';
el7.name = 'txtRow' + iteration;
el7.id = 'txtRow' + iteration;
el7.size = 40;
el7.onkeypress = keyPressTest;
cellRight7.appendChild(el7);
// insert cell
var cellRight8 = row.insertCell(9);
var el8 = document.createElement('input');
el8.type = 'text';
el8.name = 'txtRow' + iteration;
el8.id = 'txtRow' + iteration;
el8.size = 40;
el8.onkeypress = keyPressTest;
cellRight8.appendChild(el8);
}
以上所有内容都可以在for循环中的几行中完成。
//counter to keep track of rows
var rowCount = 1;
var tbl = document.getElementById('tblSample');
function addRowToTable(){
// add a row
var row = tbl.insertRow(rowCount);
//add the first cell
var leftCell = row.insertCell(0);
var textNode = document.createTextNode(rowCount);
leftCell.appendChild(textNode);
//Insert the rest of the cells
for(var i = 1; i<10; i++){
var cell = row.insertCell(i);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow'+rowCount;
el.id = 'txtRow'+rowCount;
el.size = 40;
el.onkeypress = keyPressTest;
cell.appendChild(el);
}
//Increment the counter
rowCount++;
}
由于我们添加了一个计数器，因此当我们从表中删除一行时，我们需要减少它。所以你的removeRow函数应该如下所示：
function removeRowFromTable(){
var lastRow = tbl.rows.length;
if (lastRow > 1) {
tbl.deleteRow(lastRow - 1);
rowCount--;
}
}
您还应该将名称属性添加到表单中的输入元素。
<div>
TESTER <input type="text" name="tester"/>
DATE <input type="text" name="date" />
EMP NO <input type="text" name="emp"/>
6S DONE <input type="text" name="6s"/>
WW <input type="text" size="8"maxlength="8" name="ww"/>
NAME <input type="text" name="name"/>
SHIFT <input type="text" name="shift"/>
</div>
创建一个提交按钮并将其绑定到onClick事件，而不是使用action属性。 例如：
<input type='button' value='Submit' onclick='submitForm()' />
最后，你需要添加一个submitForm（）函数，它可以获取你想要的所有数据，然后将它发送到你想要的任何地方。
function submitForm(){
var form = document.getElementById('form1');
//get all the inputs under the div tag
var inputs = form.children[0].children;
var inputName, inputValue, csvData= '';
//get the name and value of each input and convert to csv format
for (var i = 0; i<inputs.length; i++)
{
inputName = inputs[i].name;
inputValue = inputs[i].value;
csvData += inputName +","+inputValue +"\n";
}
console.log(csvData);
}
字符串csvData将包含csv格式的所有数据。你可以随意使用它。