2012-11-27 2 views
-1

이 코드는 성공적으로 실행됩니다.하지만 내 문제는이 양식을 csv.file 형식으로 저장하는 저장 버튼이있는 기능을 추가해야합니다. 어떻게하면됩니까? 그렇게? 어떤 수정 내가 게시 할 예정입니다 내 requirement.I을 fullfill에 할 수 있도록 할 수있는 모든 code..Pls는 TQ ...이와 함께 긴 post..If U들에 대한HTML 양식을 csv.file 형식으로 저장해야합니다.

<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> 

죄송합니다 좀 도와 이 코딩 문제가 개선 될 거라 생각해 .Pls 날 knigh하자.

+0

JQuery를 사용하십시오. 삶을 편하게하십시오. –

+0

조치 attributte는 csv 파일을 전달해서는 안됩니다. – stackErr

+0

전체 코드를 게시 할 수 있다면 좋을 것입니다. – stackErr

답변

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> 

제출 버튼을 생성하고 action 속성을 사용하는 대신 onClick 이벤트에 연결합니다. 예를 들어 는 :

<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 형식으로 모든 데이터를해야합니다. 원하는대로 사용할 수 있습니다.

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로 해당 문자열을 보내는 일부 페이지에 게시 할 수 있습니다

그럼 당신은 쉼표로 구분 된 문자열을 만들려면이 같은 작업을 수행 할 수 있습니다 .

관련 문제