如何從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中動態創建的文本框中獲取值

回答

相關問題