html表单，它有文本和表，现在我想在一个简单的文本文件中保存和检索数据，如何实现它

html form which has text and table now I want to save and retrieve the data in a simple text file how to achieve it?

本文关键字：文本 文件 检索 保存 实现 何实现 数据 表单 一个 html 简单      更新时间：2023-09-26

我创建了一个html表单，其中包含文本（名称和联系人编号）和表格。

问题是，我必须使用javascript在一个简单的text/csv文件中保存和检索在这些字段中输入的数据。

有人能帮我吗？

<html>
<head>
  <title>Assignment</title>
  <script>
    function addRow()
     {
      var qualific = document.getElementById("Qualification");
      var percent = document.getElementById("Percentage");
      var year = document.getElementById("yop");
      var univers = document.getElementById("university");
      var table = document.getElementById("dataTable");
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
      row.insertCell(0).innerHTML = '<input type="text" id="Qualification">';
      row.insertCell(1).innerHTML = '<input type="NUMBER" id="Percentage">';
      row.insertCell(2).innerHTML = '<input type="NUMBER" id="yop">';
      row.insertCell(3).innerHTML = '<input type="text" id="university">';
    }
     //delete row	
    function deleteRowEd(r) {
      var i = r.parentNode.parentNode.rowIndex;
      document.getElementById("dataTable").deleteRow(i);
    }
    function myFunctionEd() {
      alert("Are you sure you want to delete this row?");
    }
  </script>
</head>
<body>
  <p class="first"><b> Name:</b>&nbsp;&nbsp;&nbsp;*
    <input type="text" name="firstname" style="text-transform: capitalize" required placeholder="Enter a valid name" />
  </p>
  <b> Contact Number:</b>&nbsp;&nbsp;&nbsp;*
  <input type="text" name="pcn" required placeholder="Enter a valid number" onblur="validatenumber(this);" onkeypress="return onlyNos(event,this);" size="6" maxlength="10" />
  </br>
  </br>
  <b>Education Details:</b>
  <table id="dataTable" border="1" style="width:50%;text-align:center;">
    <tr>
      <td><b>Qualification<b></td>
    <td><b>Percentage</b>
      </td>
      <td><b>Year of Passout</b>
      </td>
      <td><b>University</b>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type="text" id="Qualification">
      </td>
      <td>
        <input type="number" id="percentage">
      </td>
      <td>
        <input type="number" id="yop">
      </td>
      <td>
        <input type="text" id="university">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="Qualification">
      </td>
      <td>
        <input type="number" id="percentage">
      </td>
      <td>
        <input type="number" id="yop">
      </td>
      <td>
        <input type="text" id="university">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="Qualification">
      </td>
      <td>
        <input type="number" id="percentage">
      </td>
      <td>
        <input type="number" id="yop">
      </td>
      <td>
        <input type="text" id="university">
      </td>
    </tr>
  </table>
  <br>
</body>
</html>

当您的data.txt文件是一个由逗号分隔的条目组成的长字符串，没有换行符时，此代码将起作用：

data.txt：

头1，头2，头3，头4，头5，值1_1，。。。，值5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});
function processData(allText) {
    var record_num = 5;  // or however many elements there are in each row
    var allTextLines = allText.split(/'r'n|'n/);
    var entries = allTextLines[0].split(',');
    var lines = [];
    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert(lines);
}

以下代码将在每组记录之间使用换行符的"真实"CSV文件上工作：

data.txt：

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});
function processData(allText) {
    var allTextLines = allText.split(/'r'n|'n/);
    var headers = allTextLines[0].split(',');
    var lines = [];
    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {
            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
    // alert(lines);
}
相关文章：