时间戳

首页 > 解决方案 > 如何在包含按钮的预先存在的表中添加一行

javascript - 如何在包含按钮的预先存在的表中添加一行

问题描述

我正在尝试向具有预先存在的值的表中添加一行。在每一行上都有一个“编辑”按钮，它不做任何事情（按设计）。我还有一个提示，用户将在其中输入他们的姓名、电子邮件和电话号码，并将其添加到上表中。一切正常，但我认为我的 .js 文件中缺少某些内容。我错过了什么？

let btnAdd = document.querySelector('button');
let table = document.querySelector('table');

                let nameInput = document.querySelector('#name');
                let numberInput = document.querySelector('#number');
                let emailInput = document.querySelector('#email');
                

               /* btnAdd.addEventListener('click', () =>{
                    let name = nameInput.value;
                    let number = numberInput.value;
                    let email = emailInput.value;

                    let template = `
                    <tr>
                        <td>${name}</td>
                        <td>${number}</td>
                        <td>${email}</td>
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" </td>
                        <td><input type ="button" value="Add New Contact" onclick="script.js();" </td>
                    </tr>
                    `;
                    
                    table.innerHTML += template;
                })
            }*/

            function demoClick () 
            {
                alert
                 (
                    "Script Loaded"
                );
            }
<html>
    <head>       
        <title>Stars in the HollyWoo Sky</title>
        <link href = "style.css" rel="stylesheet" type="text/css">
        <script type = "text/javascript" src= "script.js">
        </script>
    </head>
    <body>
        <img class= "img-horse" src = "hollywoo.jpg" alt="Sad Horse Man">
        <div class = "container">
            <div id="data">
                <h3>Add your info to recieve notifications!</h3>
                <input type = "text" id="name" placeholder="Enter Name">
                <input type = "text" id="number" placeholder="Enter Phone Number">
                <input type = "text" id="email" placeholder="Enter Email Address">
                <input type ="button" value="Add New Contact" onclick="demoClick();"></td>
            </div>

            <table class= "content-table" id="ContactList">
                <thead>
                <h2>Secretariat Mailing List</h2>
                    <tr>
                        <th>Contact Name</th> 
                        <th>Contact Number</th> 
                        <th>Contact Email</th> 
                        <th>Contact Action</th> 
    
                    </tr>
                </thead>
    
               
                <tbody>
                    <tr> 
                        <td>Bojack Horseman</td> 
                        <td>323-902-1992</td> 
                        <td>SecretariatRulez96@hotmail.com</td> 
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" /></td> 
                    </tr>
        
                    <tr> 
                        <td>Diane Nguyen</td> 
                        <td>323- 319-1980</td> 
                        <td>TotallyNotDiane@gmail.com</td> 
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" /></td> 
                    </tr>
        
                    <tr>        
                        <td>Todd Chavez</td> 
                        <td>323-248- 4156</td> 
                        <td>DizneyWorld@bonzibuddi.net</td> 
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" /></td> 
                    </tr>
                </tbody>           
                  
        </table>
    </div>
    </body>
</html>

标签： javascripthtml

解决方案

你有这一行：

let btnAdd = document.querySelector('button');

但是，您的代码中没有<button>元素。如果你给你的“添加新联系人”input元素一个id，然后你可以引用它：

let btnAdd = document.getElementById('btnAdd');

此外，您的 HTML 无效存在一些问题（即，您不能只将内容放在table元素中 - 它们必须在 ath或td.

最后，不要使用内联 HTML 事件属性，例如onclick. 相反，将你的 JavaScript 与 HTML 分开，使用.addEventListener和不使用javascript:void(0);- 这两者都是大约 20 年前的语法，今天真的没有实用的我们。

请参阅下面的 HTML 和 JavaScript 注释：

let btnAdd = document.getElementById('btnAdd');
let table = document.querySelector('table');

// When an element has an id, use `.getElementById()`, which
// is the most efficient way to find the element.
let nameInput = document.getElementById('name');
let numberInput = document.getElementById('number');
let emailInput = document.getElementById('email');      

btnAdd.addEventListener('click', () =>{
  let name = nameInput.value;
  let number = numberInput.value;
  let email = emailInput.value;

  let template = `<tr>
                    <td>${name}</td>
                    <td>${number}</td>
                    <td>${email}</td>
                    <td><input type ="button" value="Edit"></td>
                 </tr>`;
                 
  table.innerHTML += template;
});
<html>
    <head>       
        <title>Stars in the HollyWoo Sky</title>
        <link href ="style.css" rel="stylesheet" type="text/css">
        <script src="script.js"></script>
    </head>
    <body>
        <img class= "img-horse" src = "hollywoo.jpg" alt="Sad Horse Man">
        <div class = "container">
            <div id="data">
                <h3>Add your info to recieve notifications!</h3>
                <input type = "text" id="name" placeholder="Enter Name">
                <input type = "text" id="number" placeholder="Enter Phone Number">
                <input type = "text" id="email" placeholder="Enter Email Address">
                <input type ="button" value="Add New Contact" id="btnAdd"> <!-- You had a <td> here, which is invalid.  -->
            </div>
            <table class= "content-table" id="ContactList">
                <thead>
                    <tr>
                       <!-- Content must go into a table cell -->
                      <th colspan="4"><h2>Secretariat Mailing List</h2></th>
                    </tr>
                    <tr>
                        <th>Contact Name</th> 
                        <th>Contact Number</th> 
                        <th>Contact Email</th> 
                        <th>Contact Action</th> 
                    </tr>
                </thead>
                <tbody>
                    <tr> 
                        <td>Bojack Horseman</td> 
                        <td>323-902-1992</td> 
                        <td>SecretariatRulez96@hotmail.com</td> 
                        <td><input type ="button" value="Edit"></td> 
                    </tr>
                    <tr> 
                        <td>Diane Nguyen</td> 
                        <td>323- 319-1980</td> 
                        <td>TotallyNotDiane@gmail.com</td> 
                        <td><input type ="button" value="Edit"></td> 
                    </tr>
                    <tr>        
                        <td>Todd Chavez</td> 
                        <td>323-248- 4156</td> 
                        <td>DizneyWorld@bonzibuddi.net</td> 
                        <td><input type ="button" value="Edit"></td> 
                    </tr>
                </tbody>           
        </table>
    </div>
    </body>
</html>

推荐阅读