如何獲取JavaScript生成的input元素的文本？

Question

我有一個表格，每次單擊下方的“ +”按鈕時，都會創建一行輸入元素。 所有元素都被賦予className“ table-data”。 單擊“完成”按鈕后，我要遍歷所有這些元素並在其中獲取文本：

<table id="myTable"></table>

<button onclick="addRow();">+</button>
<button onclick="getData();">Done</button>

function addRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);

    cell1 = row.insertCell(0);
    cell1.innerHTML = '<input type="text"></input>';
    cell1.className = 'table-data';

    cell2 = row.insertCell(1);
    cell2.innerHTML = '<input type="text"></input>'; 
    cell2.className = 'table-data';
}


function getData() {
    inputCells = document.getElementsByClassName("table-data");

    for (var i = 0; i < inputCells.length(); i++) {
        console.log(inputCells[i].innerHTML);
}
}

但是，當我運行此代碼時，它只會記錄：'input type =“ text”'

我嘗試使用此代替：

console.log(inputCells[i].value);

但是此方法僅記錄“未定義”。 如何獲得這些輸入元素的值？

注意：我不介意jQuery是否用於回答這個問題。

Answer 1

我已經為您准備了使用jQuery的解決方案，因為您的問題已被標記。 我的解決方案在表中找到所有輸入，然后使用jQuery＃each方法遍歷它們。

 const $table = $('#myTable'); $('#addBtn').on('click', function() { let tr = $('<tr>'); let td1 = $('<td>'); let td2 = $('<td>'); let input = $('<input>', { type: 'text', class: 'table-data' }); td1.append(input.clone()); td2.append(input.clone()); tr.append(td1); tr.append(td2); $table.append(tr); }); $('#doneBtn').on('click', function() { $table.find('input').each(function() { console.log($(this).val()); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"></table> <button id='addBtn'>+</button> <button id='doneBtn'>Done</button> 

Answer 2

演示中詳細評論

 // Reference form const form = document.forms[0]; /* //A Pass a number (max 10) //B Reference table //C Number of cells in a row //D if number of cells in a row is less than input number... //E Run addCols() function //F Number of cells in a row is equal to number of the input //G Add row //H On each iteration... //I Add a cell //J Create an input assign type and name //K Add input to cell. */ function addRow(count) {//A const table = document.querySelector("table");//B let width = table.rows[0].cells.length;//C if (width < count) {//D addCols(table, width, count);//E width = count;//F } const row = table.insertRow();//G for (let r = 0; r < width; r++) {//H const cell = row.insertCell();//I const text = document.createElement('input');//J text.name = 'data'; text.type = 'text'; cell.appendChild(text);//K } return false; } // Similar to addRow() but will only adds cells function addCols(table, width, count) { let rowCount = table.rows.length; for (let r = 0; r < rowCount; r++) { let row = table.rows[r]; for (let c = 0; c < (count - width); c++) { let cell = row.insertCell(); let text = document.createElement('input'); text.type = 'text'; text.name = 'data'; cell.appendChild(text); } } return false; } /* //A Pass Event Object //B Prevent the form from sending data to a browser //C Collect all form controls and convert collection into array //D Use flatMap() to filter in the inputs with text and extract it */ function getData(event) {//A event.preventDefault();//B const ui = [...this.elements];//C let txt = ui.flatMap(field => field.matches('[name=data]') && field.value !== '' ? [field.value] : []);//D console.log(txt); return txt; } //Register the button to click event form.elements.add.onclick = function(event) { const qty = Number(event.target.previousElementSibling.value); addRow(qty); }; //Register the form to submit event form.onsubmit = getData; 

 input {display:inline-block;font:inherit;width:10vw} 

 <form> <input id='qty' type='number' min='0' max='10' value='2'> <button id='add' type='button'>+</button> <button type='submit'>Done</button> <table><tr></tr></table> </form>