如何仅使用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

这就是你想要的，我给小提琴添加了一个按钮，所以你有一个事件让它看起来有用： 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!");
    }

Answer 2

这是你的答案：

http://liveweave.com/gGxK4b

JavaScript的：

// Create the button and the text inside
var btn = document.createElement("button");
var btnText = document.createTextNode("This is just a button");
btn.appendChild(btnText);

// Add to the div (main)
var element = document.getElementById("main");
element.appendChild(btn);

HTML：

<div id="main">
</div>

Answer 3

你想要做的是不是最理想的。

相反，将HTML按钮定义在变量中，并在需要时将其注入页面。

基本上是这样的：

<script>
var button = "<button style=\"background-color:green; border:1px solid darkgreen; color:white; font-weight:bold; padding: 5px 10px;\">PURCHASE</button>";

document.getElementById('tag-id').innerHTML = button;
</script>

见演示