如何从JSON中动态创建的文本框中获取值

我试图通过Javascript动态创建一行文本框并读取JSON文本框的值。后来，我必须阅读JSON并在textarea中显示值，这应该只能通过jQuery和JavaScript来实现。如何从JSON中动态创建的文本框中获取值

我能够动态地创建文本框，但我无法读取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/

来源

2014-07-07 user3806955

中的jsfiddle您的附加功能无法正常工作 – Yaje

你应说明在你的问题 – Yaje

哎呀对不起..完成 – user3806955

由于您使用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>

DEMO

个

一些地方你会错：

$("txtName")无效的选择
在尝试无行引用来收集数据

来源

2014-07-07 01:38:22 charlietfl

如何从JSON中动态创建的文本框中获取值

回答

相关问题