- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试通过 Javascript 动态创建一行文本框并读取 JSON 中文本框的值。后来,我必须读取 JSON 并在文本区域中显示值,这只能通过 jquery 和 javascript 来实现。
我能够动态创建文本框,但无法读取 JSON 中的值。当我使用 jQuery 部分(下面提到)时,动态创建文本框的 javascript 不起作用。请提供任何建议。
<table id="myTable">
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Occupation and Employer</th>
<th>Add</th>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtAge" /></td>
<td><input type="text" id="txtGender" /></td>
<td><input type="text" id="txtOccupation" /></td>
<td><input type="button" id="btnAdd" class="button-add" onClick="insertRow()" value="add"></input></td>
<td><input type="button" id="btnSave" class="button-add" value="Save"></input> </td>
</tr>
</table>
<script>
var index = 1;
function insertRow()
{
var table=document.getElementById("myTable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var t1=document.createElement("input");
t1.id = "txtName"+index;
cell1.appendChild(t1);
var cell2=row.insertCell(1);
var t2=document.createElement("input");
t2.id = "txtAge"+index;
cell2.appendChild(t2);
var cell3=row.insertCell(2);
var t3=document.createElement("input");
t3.id = "txtGender"+index;
cell3.appendChild(t3);
var cell4=row.insertCell(3);
var t4=document.createElement("input");
t4.id = "txtOccupation"+index;
cell4.appendChild(t4);
index++;
}
$(document).ready(function(){
$("#btnsave").click(function ()
{
alert("Hi");
var dataToSend={
'Name':[],
'Age':[]};
dataToSend.Name.push({$("txtName").val().trim()});
dataToSend.Age.push({$("txtAge").val().trim()});
localStorage.setItem('DataToSend', JSON.stringify(DataToSend));
var restoredSession = JSON.parse(localStorage.getItem('dataToSend'));
// Now restoredSession variable contains the object that was saved
// in localStorage
console.log(restoredSession);
alert(restoredSession);
});
});
JSFiddle:http://jsfiddle.net/S7c88/
最佳答案
由于您使用的是 jQuery,因此您可以使用 clone()
等方法大大简化整个过程。 。
这是一个工作示例,我创建了一个行对象数组。由于您没有在表单中执行此操作,因此我删除了 ID 并仅使用 data-name
.
var $row;
function insertRow() {
$('#myTable').append($row.clone());
}
$(function () {
$row = $('tr').eq(1).clone(); /* clone first row for re-use*/
$('#myTable').on('click', '.btnSave', function () {
var dataToSend = [];
$('tr:gt(0)').each(function () {
var data = {};
$(this).find('input').each(function () {
data[$(this).data('name')] = this.value
});
dataToSend.push(data);
});
/* display data in textarea*/
$('#output').val(JSON.stringify(dataToSend, null, '\t'))
});
}) ;
我改变了你的input type=button
至button
利用 input
选择器同时循环行以创建数据,而不必过滤掉按钮
您的演示有无效的 html,缺少 <tr>
顶部套装<th>
一些你出错的地方:
$("txtName")
选择器无效关于javascript - 如何从 JSON 中动态创建的文本框行获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24601799/
这个问题在这里已经有了答案: final keyword in method parameters [duplicate] (9 个回答) 关闭 8 年前。 在此示例中,声明 Object fina
我的目标:是通过我的函数更新字段获取选定值并使用函数输出值运行它。 问题:当我从列表中选择值时,它不会触发函数,也不会更新字段。 感谢您的帮助。 HTML 12 14 16 18 20 22 24
我有一本具有这种形式的字典: myDict = {'foo': bar, 'foobar baz': qux} 现在,我想拆分字典键中的空格,使其成为下一个键并获取值(重复)。 myDictRev1
vector a; vector b; int temp_holder; cout > temp_holder) a.push_back(temp_holder); cout > temp_h
Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿。当然,我
我正在使用 jquery ui 日期选择器来获取 fromDate 和 toDate 以下是from日期的代码 $("#from_date").datepicker({
我是一名优秀的程序员,十分优秀!