Получение значений из входных элементов в виде таблицы в HTML

Question

У меня есть таблица настроить как таковую:

<table id="mantab" style="cursor:pointer;" onkeypress="scan(event)"> 
<tr> 
    <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a> 
    <td><input type='text' placeholder="Term" id='inp1' class="inp1" /></td> 
    <td><input type='text' placeholder="Definition" id='inp2' class="inp2" /></td> 
</tr> 
</table> 

Действие может быть принято, чтобы добавить строку в этой таблице, которая осуществляется путем вставки ячейки с помощью метод insertCell и установка этого внутреннего HTTML ячейки соответствующим образом.

То, что я пытался сделать, это перебрать первый столбец таблицы и добавить все значения из входов в каждой ячейке (после их ввода) в строку, разделенную запятой. Этот процесс следует повторить для второго столбца.

Проблема:

• Все я пытаюсь читать неопределен

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

  document.getElementById ("идентификатор "). значение,

  document.getElementByClassName (" classname "). Значение,

  table.rows [0] .cells [0] .value,

  table.rows [0] .cells [0] .val(),

  table.rows [0] .cells [0 ] .innerHTML,

  table.rows [0] .cells [0] .children [0] .val()

Без работы, некоторые возвращают пустым, наиболее неопределенным. ВнутреннийHTML возвращает элемент ввода внутри ячейки, но нет фактических входных данных.

Если более четкое представление о том, что я смотрю на это необходимо, увидеть следующее:

Это должно вернуть одну переменную, содержащую строку: «Кея, KEYB, KeyC», а в другой : «ValueA, ValueB, ValueC»

Я немного новичок в javascript, но у меня есть базовое знание пары других языков. Я не уверен, почему итерация через стол создает такую ​​проблему. Любая помощь, разъясняющая, как я могу извлечь эти «невидимые» ценности, будет оценена по достоинству. Благодарю.

Вот один из многих подходов, которые не работают для меня:

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
     if(j == 0) { //if first column 
      words += col.getElementsByClassName("inp1").value + ","; //inp1 refers to first column input class name 
     } else { 
      defs += col.getElementsByClassName("inp2").value + ","; //inp2 refers to second column input class name 
     } 
    } 
} 

В этом примере слова, аналогичные первые переменный из выше изображений и DEFS ко второму.

Update: регистрируя значения и элемент, ответственных за предоставление значения в результате этого:

Первый журнал пуст, а второй не имеет значение, присвоенное, даже если я напечатал в чем-то ,

Answer 1

Вы можете сделать что-то вроде этого, используя селекторы JQuery

$("#bt").click(function() 
 
{ 
 
    var keys = [], values = []; 
 

 
    $('table tr input').each(function(i,e){ 
 
    //access the input's value like this: 
 
    var $e = $(e); 
 
    if($e.hasClass('key')){ 
 
    \t keys.push($e.val()); 
 
    }else{ 
 
    values.push($e.val()); 
 
    } 
 
}); 
 
    keys = keys.join(','); 
 
    values = values.join(','); 
 
    console.log(keys); 
 
    console.log(values); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="mantab" style="cursor:pointer;"> 
 
<tr> 
 
    <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a> 
 
    <td><input type='text' placeholder="Term" id='inp1' class="key" /></td> 
 
    <td><input type='text' placeholder="Definition" id='inp2' class="value" /></td> 
 
</tr> 
 
<tr> 
 
    <a href="#" data-popover=".popover-help" class="open-popover modal-in"></a> 
 
    <td><input type='text' placeholder="Term" id='inp1' class="key" /></td> 
 
    <td><input type='text' placeholder="Definition" id='inp2' class="value" /></td> 
 
</tr> 
 
</table> 
 

 
<button id="bt"> 
 
Get Value 
 
</button>

Answer 2

что об использовании JQuery и найти все входы в таблице:

$('table input').each(function(i,e){ 
    //access the input's value like this: 
    console.log($(e).val()); 
});