如何在html表中顯示臨時數據並刪除？

Question

當我單擊該按鈕時，我有三個輸入框和一個按鈕下方我希望輸入數據應該進入 html 表並且應該能夠刪除該記錄

請幫助我提前謝謝

Answer 1

我對一個輸入框做了同樣的事情。 所以做三個人應該不是問題。 你一定在尋找這個代碼：

$("table").on("click", "tbody tr td a", function () {
  $(this).closest("tr").remove();
  return false;
});

您可以按Enter 鍵或單擊按鈕插入臨時數據。 好的，請注意，由於您沒有放置足夠的代碼，您可以這樣做：

 $(function () { $("#tempInsert").keyup(function (e) { if (e.keyCode == 13) insertRow(); }); $("#tempBtn").click(function () { insertRow(); }); $("table").on("click", "tbody tr td a", function () { $(this).closest("tr").remove(); return false; }); }); function insertRow() { if ($("#tempInsert").val().length > 0) $("table tbody").append('<tr><td>' + $("#tempInsert").val() + '</td><td><a href="#">&times;</td></tr>'); $("#tempInsert").val(""); }

 * {font-family: 'Segoe UI'; text-decoration: none;}

 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <input type="text" id="tempInsert" /> <input type="button" id="tempBtn" value="Add" /> <table width="100%"> <thead> <tr> <th width="85%">Stuff</th> <th width="15%">Action</th> </tr> </thead> <tbody></tbody> </table>

Answer 2

$('#submitBtn').click(function(){
   var input1 = $('#input1').val();
   var input2 = $('#input2').val();
   var input3 = $('#input3').val();
   $('#td1').html(input1);
   $('#td2').html(input2);
   $('#td3').html(input3);
});

<table>
  <tr>
    <td id="td1"></td>
    <td id="td2"></td>
    <td id="td3"></td>
  </tr>
</table>

Answer 3

我以為你是新手，我為你寫了一個簡單的例子，只是為了了解如何做。

HTML

<table style="border: 1px solid red; width: 200px; height: 80px; ">
        <tr>
            <td id="nm"></td>
        </tr>
        <tr>
            <td id="fnm"></td>
        </tr>
        <tr>
            <td id="ag"></td>
        </tr>
    </table>
    Name : <input type="text" id="n"><br />
    F/Name: <input type="text" id="fn"><br />
    Age : <input type="text" id="age"><br />
    <button>Click</button>

腳本

$(function(){
    $('button').click(function(event) {
        $('#nm').text($('#n').val());
        $('#fnm').text($('#fn').val());
        $('#ag').text($('#age').val());
        $('#n').val('');
        $('#fn').val('');
        $('#age').val('');
    });
});

Answer 4

試試這個演示

 function Add() { var tbl = document.getElementById("tbl"); var fname = document.getElementById("FName").value; var lname = document.getElementById("LName").value; var city = document.getElementById("City").value; if (fname == "" && lname == "" && city == "") alert("Enter Text in input box"); else { var tblcount = tbl.rows.length; var row = tbl.insertRow(tblcount); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = fname; cell2.innerHTML = lname; cell3.innerHTML = city; } }

 #tbl tr td { padding: 0 10px; }

 <input id="FName" type="text"></input> <input id="LName" type="text"></input> <input id="City" type="text"></input> <button id="btnAdd" onclick="Add();">Add</button> <table id="tbl"> <tr> <td>Fisrt Name</td> <td>Last Name</td> <td>City</td> </tr> </table>