-1

此代码运行成功..但我的问题是，我需要添加一个带有保存按钮的函数，该按钮将以 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>

很抱歉发了这么长的帖子。如果你们认为这个编码应该改进。请告诉我

4

2 回答 2

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 发送回客户端作为下载。

于 2012-11-27T05:38:02.543 回答
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 格式的所有数据。你可以随心所欲地使用它。

于 2012-11-27T05:31:57.987 回答