#javascript #html
#javascript #HTML
Вопрос:
У меня есть форма в таблице со столбцами заголовка и описания, и строки могут быть добавлены динамически с помощью кнопки. Мне нужно получить доступ и сохранить входные значения в текстовых полях, созданных функцией 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>
Комментарии:
1. Итак .. в чем вопрос?
Ответ №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/#amp;togetherjs=rQ2b5IsJQ1
или в чем проблема?
Ответ №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>