如何获取动态生成的表td输入值

Question

I have a dynamically generated table like below

this is the code that generate this table

 function pullInventory(data) { var container = document.getElementById('inventoryContainer') var index = 0; console.log(index) data.forEach(function(awardsSnap) { index ++; // console.log(awardsSnap, index) var awardItem = awardsSnap.val() // Attach an asynchronous callback to rea var NSNcard = ` <tr> <td class="serial">${awardItem.NSN}</td> <td> ${awardItem.Nomenclature} </td> <td> ${awardItem.Awarddate} </td> <td> ${awardItem.Awardid} </td> <td> <input type="text" placeholder="ie 100 EA" class="form-control" value="" id="qty${index}"style="width: 110px;"> </td> <td> <input type="text" placeholder="ie $9.23 " class="form-control" value="" style="width: 110px;"> </td> </tr> `; container.innerHTML += NSNcard; }); } 

I want to get all the user entered quantity and price on a button click so I use this

 document.querySelector("#savebtn").addEventListener("click", e => { var rows = document.getElementById("WelcomeTable").getElementsByTagName("tbody")[0].getElementsByTagName("tr").length; saveInventory(rows); }); function saveInventory(rows) { const columnHeader = Array.prototype.map.call( document.querySelectorAll(".table th"), th => { return th.innerHTML; } ); const tableContent = Object.values( document.querySelectorAll(".table tbody tr") ).map(tr => { const tableRow = Object.values(tr.querySelectorAll("td")).reduce( (accum, curr, i) => { const obj = { ...accum }; obj[columnHeader[i]] = curr.innerHTML.trim(); console.log(accum, curr, i) return obj; }, {} ); return tableRow; }); } 

everything works fine except that the two input column in the table above does not detect user input. I'm not able to get the quantity and price value entered.

   Award Date: "08-23-2012"

   Award#: "SP452013D0055"

   NSN: "S222V00004789"

   Nomenclature: " BATTERIES, NICKEL-CADMIUM"

   Quantity: "<input type="text" placeholder="i.e. 100 EA" class="form-control" value="" id="qty18" style="width: 110px;">"

   Unit-Price: "<input type="text" placeholder="i.e. $9.23 " class="form-control" value="" style="width: 110px;">"

I tried this and other things but they output undefine

obj[columnHeader[4]]=curr.val(); obj[columnHeader[4]]=curr.value;

how could i get the enetered quantity and price from the dynamic table?

Answer 1

val() is jQuery method. You'll need to use .value in JavaScript.

Answer 2

You could try doing something like this:

 window.onload = ()=>{ let targetTable = document.getElementById('target-table'); let targetTableRows = targetTable.rows; let tableHeaders = targetTableRows[0]; // start from the second row as the first one only contains the table's headers for(let i = 1; i < targetTableRows.length; i++){ // loop over the contents of each row for(let j = 0; j < targetTableRows[i].cells.length; j++){ // something we could use to identify a given item let currColumn = tableHeaders.cells[j].innerHTML; // the current <td> element let currData = targetTableRows[i].cells[j]; // the input field in the row let currDataInput = currData.querySelector('input'); // is the current <td> element containing an input field? print its value. // Otherwise, print whatever is insside currDataInput ? console.log(`${currColumn}: ${currDataInput.value}`) : console.log(`${currColumn}: ${currData.innerHTML}`); } } }; 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <table class="table" id="target-table"> <thead> <tr> <th scope="col">Person #</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> <th scope="col">Quantity</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td><input type="text" value="01-quantity" id="value-01"></td> <td><input type="text" value="01-price" id="value-01-2"></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td><input type="text" value="02-quantity" id="value-02"></td> <td><input type="text" value="02-price" id="value-02-2"></td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td><input type="text" value="03-quantity" id="value-03"></td> <td><input type="text" value="03-price" id="value-03-2"></td> </tr> </tbody> </table> 

What is done in the example above should also work for your specific case.

Also, here's a working exmaple :)

Answer 3

obj[columnHeader[i]] = curr.innerHTML.trim();

innerHtml.trim returns only tag having direct child with text in it. In your code last two td having an input as child. so in that case you need to check 'curr' having a child available. if there is a child available and its tagName is input, then you have to use childs value.

for example

obj[columnHeader[i]] = curr.children.length && curr.children[0].tagName=="INPUT" ? curr.children[0].value : curr.innerHTML.trim();

the above condition can be check and assign to a variable before it is assigned to key