Question

我遇到了JavaScript问题。当我推动＆＃34;添加＆＃34;按钮我想用表单中的列表创建一个表。

所以例如：新课程：名称：A，内容：B =＆gt;添加

|name|content
|  A |   B

每一条新记录都会出现在桌面的末尾。你知道我该怎么办？使用PHP我会很容易，但我想用JavaScript做。

我的想法是将此代码添加到脚本中：文件。 addEventListener（＆＃39; DOMContentLoaded＆＃39;，registerCallbacks）; function registerCallbacks（）{var addButton = document.getElementById（＆＃39; add'）; addButton.addEventListener（＆＃39; click＆＃39;，function（evt）{add（）; evt.preventDefault（）;}）;

＆＃13;

document.addEventListener('DOMContentLoaded', registerCallbacks);

function registerCallbacks() {
  var addButton = document.getElementById('add‘ );   addButton.addEventListener( '
      click ', function( evt ){ add( ); evt.preventDefault( ); } );

＆＃13;

   <html>
    <body>
    
    <form id="new">
    <label for="name">Name of lecture: <br>
    <input class="text" type="text" id="name"></input><br> 
    <label for="content">Content: <br>
    <textarea class="text" id="content"></textarea><br> 
    <button id="add"> Add </button>
    </form>
        
        
    <script>
    
    </script>
    </body>
    
    </html>

＆＃13;

Answer 1

所以第一步是激活按钮：

// Here we call the function Add() if someone clicks the button.
<button id="add" onclick="Add()"> Add </button>

现在我们要将Javascript函数Add（）添加到我们的脚本中：

function Add() {
    // We request here all the information what the user fill out.
}

所以这是一个工作片段：

＆＃13;

let table = document.getElementById("table");

function Add() {
  // We request here all the information what the user fill out.
  let name = document.getElementById("name").value,
      content = document.getElementById("content").value;
      
  // Add to table
  table.innerHTML += "<tr><td>" + name + "</td><td>" + content + "</td></tr>"
}

＆＃13;

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 3px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

＆＃13;

<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"><br> 
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br> 
<button id="add" onclick="Add()"> Add </button>

<table id="table">
  <tr>
    <th>Lecture</th>
    <th>Content</th>
  </tr>
</table>

＆＃13;

Answer 2

希望这会起作用

＆＃13;

 

 $(document).ready(function() {
  $("#add").click(function(){
    var name=document.getElementById("name").value;
    var content=document.getElementById("content").value;
     $("#table").find('tbody').append("<tr><td class='column'>"+name+"</td><td class='column'>"+content+"</td></tr>");  
  });
});

＆＃13;

<html>
<head>
<title>Add New Row</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
  border: 1px solid ;
  background:#AEB6BF;
}
.column {
  border: 1px solid ;
  background:#EAEDED;
  
}
</style>

</head>
<body>


<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br> 
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br> 
<button id="add"> Add </button>

  <table id="table" class="head">
        <thead>
            <tr>
                <td>Name</td>
                <td>Content</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
</table>
<script>

</script>
</body>
</html>

＆＃13;

Answer 3

这是实现它的一种方法：

var add_button = document.getElementById("add");
var name_field = document.getElementById("name");
var content_field = document.getElementById("content");
var table = document.getElementById("table");

add_button.addEventListener("click", function(e) {
  e.preventDefault();
  table.style = "display: block;";
  table.innerHTML += "<tr><td>" + name_field.value + "</td><td>" + content_field.value + "</td></tr>"
});

<head>
  <title>HTML Formular Table</title>
</head>

<body>

  <form id="new">
    <label for="name">Name of lecture: <br>
    <input class="text" type="text" id="name"></input><br> 
    <label for="content">Content: <br>
    <textarea class="text" id="content"></textarea><br> 
    <button id="add"> Add </button>
    </form>
    <table id="table" style= "display: none;">
            <tr>
              <th>Name</th>
              <th>Content</th>
            </tr>
    </table>

HTML公式JavaScript

3 个答案: