Получить входные значения динамически создаваемых элементов ввода

Question

Я относительно не знаком с веб-разработкой, чего я пытаюсь достичь, является массивом всех входных значений текущей строки для каждой найденной строки, например: test1, true

Хотя я могу получить динамически создаваемые входные значения, я получаю кучу заготовок, возможно, заголовков? Я также не уверен, что мой метод получения значений - лучшее решение. Вот то, что я до сих пор: http://jsfiddle.net/gcL9H/2/

<table id='categoriesTable' border='1'> 
<tr> 
    <th>Category</th> 
    <th>X</th> 
</tr> 
<tr id='data'> 
    <td><input value='test1' type='text' /></td> 
    <td><input type='checkbox' /></td> 
</tr> 
</table> 
<button id="addRow">Add</button> 
<button id="saveCategories">Results</button> 

$('#addRow').click(function() 
{ 
    $('#categoriesTable').append("<tr></tr><tr></tr><td><input type='text'/></td><td><input type='checkbox'/></td>"); 
}); 

$('#saveCategories').click(function() 
{ 
    $("#categoriesTable tr").each(function() 
    { 
     var row = []; 
     $(this).find('td').each(function() 
     { 
      var type = $(this).find('input').attr('type'); 
      if(type == "text") 
       row.push($(this).find('input').val()); 
      else 
      if(type == "checkbox") 
       row.push($(this).find('input').is(":checked")); 
     }) 
     alert(row); 
    }) 
}); 

Спасибо заранее.

Answer 1

Как сказано в других ответах, добавьте вопрос разметки с <tr> тегом

$('#addRow').click(function(){ 
    $('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>"); 
}); 

Сбор значений текста/флажок в массиве объектов:

$('#saveCategories').click(function(){ 
    var rows = []; 
    // iterates each TR, skip header one 
    $("#categoriesTable tr").each(function() { 
     if ($('td',this).length>0) { // exclude header row 
      var $td = $('td',this); 
      // push an object of the row with label/checked properties 
      rows.push({     
       label: $td.eq(0).find('input').val(), 
       checked: $td.eq(1).find('input').is(':checked') 
      }); 
     } 
    }); 

    // display results 
    $("#results").empty(); 
    $(rows).each(function(index,element) { 
     $("#results").append('row:' + index + ', label:' + element.label + ', checked:' + element.checked + '<br/>'); 
    }); 
}); 

Я добавил <div id="results"></div> в diplay собранные значения.

Fiddle: http://jsfiddle.net/gcL9H/13/

Answer 2

$('#addRow').click(function() { 
    $('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>"); 
}); 

Просто убить лишние <tr> тегов и обернуть всю строку шаблона с <tr>, и вы должны быть хорошо идти. Вы добавляли лишние теги каждый раз, когда вы добавляли.

Смотреть это fiddle

Answer 3

Были два вопроса:

Extra Роу добавляются:

$('#categoriesTable').append("<tr><td><input type='text'/></td><td><input type='checkbox'/></td></tr>"); 
// Remove all the extra <tr></tr>'s and just have one <tr> at the start, 
// one </tr> at the end 

Добавить класс в первом ряду, чтобы вы могли игнорировать этот один

<tr class="header"> 
    <th>Category</th> 
    <th>X</th> 
</tr> 

и получите свой выбор следующим образом:

$("#categoriesTable tr:not(.header)").each(function() 

Обновлено скрипку: http://jsfiddle.net/gcL9H/3/