0
133
VistasCómo obtengo los detalles en las celdas de la tabla de las identificaciones usando la función Javascript
Tengo una lista desplegable como esta:
<select id="itemsList" onchange="gettingList()"> <option>Please select the option</option> <option value="50">Soap</option> <option value="100">Sugar</option> <option value="290">Oil</option> </select> <br><br>Obtengo el precio del producto de la lista anterior. después, al hacer clic en el botón no puedo obtener el resultado.
<input type="number" id="price" disabled=""> <br><br> <input type="number" id="quantity" onChange="calculate()"> <br><br> <input type="number" id="result"> <button type="button" onclick="addDetails()">Add</button>código para la mesa
<table id="myTable" border="1"> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> </tr> </table> <br>Para esto, estoy usando este script. Pero no obtuve el resultado real.
<script> var getPrice = document.getElementById('itemsList'); function getList () { document.getElementById('price').value = getPrice.value; } function calculate () { var prc = document.getElementById('price').value; var qty = document.getElementById('quantity').value; var result = prc * qty; document.getElementById('bill').value = result; } function addDetails () { var table = document.getElementById("myTable"); var row = table.insertRow(0); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); cell1. = document.getElementById('itemsList').value; cell2. = document.getElementById('price').value; cell3. = document.getElementById('quantity').value; cell4. = document.getElementById('bill').value; } </script> ¿Cómo obtengo los detalles en las celdas de la tabla? me gusta: 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
[mi] forma correcta de hacerlo:
const myForm = document.querySelector('#my-form') , myTable = document.querySelector('#my-table tbody') ; myForm.oninput = e => { if (myForm.product.value!=='0') { myForm.price.value = myForm.product.value myForm.bill.value = myForm.price.valueAsNumber * myForm.quantity.valueAsNumber } else { myForm.price.value = '' myForm.bill.value = '' } } myForm.onsubmit = e => { e.preventDefault() // disable submit if (myForm.product.value!=='0') { let row = myTable.insertRow() row.insertCell().textContent = myForm.product.selectedOptions[0].textContent row.insertCell().textContent = myForm.price.value row.insertCell().textContent = myForm.quantity.value row.insertCell().textContent = myForm.bill.value myForm.product.value = '0' myForm.price.value = '' myForm.quantity.value = '1' myForm.bill.value = '' } } * { font-family : Arial, Helvetica, sans-serif; font-size : 14px; } label { display : block; margin : .5em 0; } label span { font-size : .9em; display : block; } input { padding-left: .7em; } table { border-collapse : collapse; margin : 2em 1em; } thead { background-color : lightsteelblue; font-weight : bold; } th, td { padding : .2em .8em; border : 1px solid darkblue; } td { text-align: right; } td:nth-of-type(1){ text-align: left; } td:nth-of-type(2)::after, td:nth-of-type(4)::after { content : ' \20a8'; } <form id="my-form"> <label> <span>Product :</span> <select id="product"> <option value="0" selected disabled>Please select the option</option> <option value="50" > Soap </option> <option value="100"> Sugar </option> <option value="290"> Oil </option> </select> </label> <label> <span>Price :</span> <input type="number" name="price" disabled> </label> <label> <span>Quantity</span> <input type="number" name="quantity" value="1" min="1"> </label> <label> <span>Amount</span> <input type="number" name="bill" disabled> </label> <button type="submit">Add</button> </form> <table id="my-table"> <thead> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> </tr> </thead> <tbody></tbody> </table>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta