Блог

Я пытаюсь динамически создать строку текстовых полей с помощью Javascript и прочитать значения текстового поля в JSON. Позже мне придется прочитать JSON и отобразить значения в textarea, и это должно быть достигнуто только с помощью 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() .

Вот рабочий пример, в котором я создал один массив объектов row. Поскольку вы делаете это не в форме, я удалил идентификаторы и просто использовал 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") Недопустимый селектор
• Нет ссылок на строки при попытке сбора данных