HTML公式JavaScript

时间:2017-11-05 09:41:37

标签: javascript html

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

所以例如: 新课程:名称:A,内容:B =>添加

|name|content
|  A |   B

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

我的想法是将此代码添加到脚本中: 文件。 addEventListener(' DOMContentLoaded',registerCallbacks); function registerCallbacks(){var addButton = document.getElementById(' add'); addButton.addEventListener(' click',function(evt){add(); evt.preventDefault();});



document.addEventListener('DOMContentLoaded', registerCallbacks);

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

   <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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

所以第一步是激活按钮:

// 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;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

希望这会起作用

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

这是实现它的一种方法:

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>