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

見演示