Question

我在表中有一个带有标题和描述列的表格，可以通过按钮动态添加行。通过“保存”按钮保存表单时，我需要访问并在javascript函数创建的文本框中保存输入值。输入值稍后将保存在本地存储中。保存的值将用于在验证失败的情况下重新填充表单。

function add_text_input() {
  var table = document.getElementById('mytable');
  var x = table.rows.length;
  table.insertRow(-1).innerHTML = '<tr>' +
    '<td> <input type="text" id="title' + x + '" /></td>' +
    '<td> <input type="text" id="description' + x + '" /></td></tr>';
}

function save_data() {
  var table = document.getElementById('mytable');
  var tableRows = table.rows.length;
  var data = [];
  for (var i = 1; i <= tableRows; i++) {
    for (var j = 0; j < 2; j++) {
      var title = document.getElementById('title' + i).value;
      var desc = document.getElementById('description' + i).value;
      var temp = {
        title: title,
        description: desc
      };
      data.push(temp);
    }
  }
  window.localStorage.setItem('Table1', JSON.stringify(data));
}

<form>
  <table id="mytable">
    <tr>
      <td> Title </td>
      <td> Description </td>
    </tr>
  </table>
  <input type="button" onclick="add_text_input()" value="add row">
  <input type="button" onclick="save_data()" value="save">
</form>

Answer 1

您的意思是这样的吗？

$(document).ready(()=>{ 

    $('#container').append('<input id="addedTxt" type="text" />');
  $('#addedTxt').val('Test');

    $('#saveBtn').on('click', ()=>{
        alert($('#addedTxt').val());
  });

});

<div id="container">

</div>
<input id="saveBtn" type="button" value="save" />

（使用jquery）

https://jsfiddle.net/u6vnxwzc/1/#&togetherjs=rQ2b5IsJQ1

或问题出在哪里？

Answer 2

在您的代码中，为什么要使用第二个For循环？我认为没有必要。

找到工作代码段

https://s.codepen.io/mastersmind/debug/VNyKrY/DqADdKoRXEjA

function add_text_input() {
  var table = document.getElementById('mytable');
  var x = table.rows.length;
  table.insertRow(-1).innerHTML = '<tr>' +
    '<td> <input type="text" id="title'+x+'" /></td>'+
    '<td> <input type="text" id="description'+x+'" /></td></tr>';
}
function save_data(){
  var table = document.getElementById('mytable');
  var tableRows = table.rows.length;
  var data = [];
  for (var i = 1; i <= tableRows-1; i++) {
    var title = document.getElementById('title'+ i).value;
    var desc = document.getElementById('description'+ i).value;
    var temp = {title: title, description: desc};
    data.push(temp);
  }
  window.localStorage.setItem('Table1', JSON.stringify(data));
}

loadData = function(){
  let data = JSON.parse(window.localStorage.getItem('Table1'));
  for(i=0; i<data.length;i++){
    add_text_input();
    document.getElementById('title'+ (i+1)).value = data[i].title;
    document.getElementById('description'+ (i+1)).value = data[i].description;
  }
}


loadData();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <table id="mytable">
        <tr>
            <td> Title </td>
            <td> Description </td>
        </tr>
    </table>

    <input type="button" onclick="add_text_input()" value="add row">
    <input type="button" onclick="save_data()" value="save">
</form>
</body>
</html>

访问由javascript函数创建的输入值

2 个答案: