javascript - 如何仅使用 JS 和 HTML 创建按钮

Question

我被要求创建一个非常非常基本的 POS，在一些用户选择要买什么和数量之后，它应该显示在显示价格、数量和产品的表格行上；我已经这样做了，但我还被要求在该行旁边制作一个按钮，如果用户愿意，可以消除整行。 这是我的 JS 代码:

function histrow() {

    var prod = document.getElementById("product");
    var cant = document.getElementById("quantity");
    var pre = document.getElementById("prrice");
    var table = document.getElementById("tblHistory");
    var posicion = table.rows.length;
    var newRow = table.insertRow(posicion);

    //Creates the new cells
    var celUno = newRow.insertCell(0);
    var celDos = newRow.insertCell(1);
    var celTres = newRow.insertCell(2);
    var celCuatro = newRow.insertCell(3);
    var celCinco = newRow.insertCell(4);

    //Starts to asign values to the cells 
    celUno.innerHTML = prod.value;
    celDos.innerHTML = cant.value;
    celTres.innerHTML = pre.value;
    //This is the TOTAL
    celCuatro.innerHTML = pre.value * cant.value;
    //Here is where I want the button to show
    celCinco.innerHTML = 


}

我不能只在 HTML 上创建一个按钮，因为我不知道用户会创建多少行，我的老师只允许我们使用 HTML 和 JavaScript 这是我软件工程的第一个学期 感谢您的帮助

 <!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>

<div id="part1">
    <center>
            <h2> POS </h2>
            <br />
            <br />
            <select class="venta" id="product">
                <option>Choose a product</option>
                <option id="1" >1</option>
                <option id="2" >2</option>
                <option id="3" >3</option>
                <option id="4" >4</option>
                <option id="5" >5</option>
                <option id="6" >6</option>
                <option id="7" >7</option>
                <!--Hasta aqui van las bebidas-->
                <option id="8" value="Cheetos">Cheetos</option>
                <option id="9">9</option>
                <option id="10">10</option>
                <option id="11">11</option>
                <option id="12">12</option>
                <option id="13">13</option>
                <option id="14">14</option>
                <option id="15">15</option>
            </select>
            <label> Product</label>
            <br />
                <!--Es el precio del producto-->
            <input type="number" id="prrice" placeholder="¿How much?" class="sale" />
            <label> Price</label>
            <br />
                 <!--Its the quantity of the product-->
            <input type="number" min="1" id="quantity" placeholder="¿How many?" class="sale" />
            <label> Quantity</label>
            <br />
            <br />
                <!--This button adds the order to the table -->
            <button id="btnadd">Add to order </button>

    </center>
    </div>

<!--Here is the table where it shows what the user orders-->

<div id="part2">
    <table id="tblHistory>
        <thead>
            <tr>
                <td>Product</td>
                <td>Quantity</td>
                <td>Price</td>
                <td>Total</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Answer 1

这就是你想要的，我在 fiddle 上添加了一个按钮，这样你就有一个事件可以看到它的工作:https://jsfiddle.net/0j1me71m/3/

    function editTextArea() {
       var options = document.getElementById("options");
       options.innerHTML = options.innerHTML + "<button type='button' onclick='doSomething()'>I am a Button</button><br>";
    }
    function doSomething(){
       alert("see me work!");
    }