Question

我有三个输入框和一个按钮当我点击那个按钮时，我希望输入数据应该进入html表并且sholud能够删除该记录

请帮助我提前谢谢

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>

<强> SCRIPT

$(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

试试这个Demo

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>

如何在html表中显示临时数据并删除？

4 个答案: