向HTML页面添加按钮，更新表格信息

Add button to HTML page which updates table information

本文关键字：更新 表格 信息 按钮 添加 HTML      更新时间：2024-01-14

我创建了一个如下所示的表，并有一个onclick函数，它可以在单击时更新分数信息。不过，我觉得这不是很有效，我更希望避免表中id的重复和函数的getElementbyId方面的列表。

其次，我更希望数据更新形成文本、json、xml或数据库文件，而不是硬编码到javascript函数中

我的桌子是这样的：

</div>
    <div id="table">
      <table id="mytable"> 
                            <table width="100%"> 
                            <td style="vertical-align:top"> 
                                <td> 
                                      <table width="99%" border="4"> 
                                      <tr><th>Team </th>
                                          <th>Score</th>
                                          <th>Team </th>
                                          <th>Score</th>
                                      </tr> 
                                      <tr>
                                          <td>Dundalk</td>
                                          <td id="score1">1</td>
                                          <td>Derry</td>
                                          <td id="score2">0</td>
                                      </tr>
                                      <tr>
                                          <td>Derry</td>
                                          <td id="score3">0</td>
                                          <td>Dundalk</td>
                                          <td id="score4">0</td>
                                      </tr>
                                      <tr>
                                          <td>Drogheda</td>
                                          <td id="score5">1</td>
                                          <td>Dundalk</td>
                                          <td id="score6">2</td>
                                      </tr>
                                      </table> 
        </div>
<div>

我的javascript如下：

  <div>
    <p>Click the button to update scores.</p>
    <button onclick="myFunction()">Update Scores</button>
    <script>
    function myFunction() {
    document.getElementById("score1").innerHTML = "3";
    document.getElementById("score2").innerHTML = "1";
    document.getElementById("score3").innerHTML = "4";
    document.getElementById("score4").innerHTML = "2";
    document.getElementById("score5").innerHTML = "6";
    document.getElementById("score6").innerHTML = "7";
    }
    </script>
    </div>

我已经创建了这个基本的xml文件，我宁愿用它来更新表格分数：

 <?xml version="1.0" encoding="ISO-8859-1"?>
<score>
<scores>
  <team>"Dundalk"</team>
  <score>3</score>
</scores>
<scores>
  <Team>"Drogheda"</Team>
  <score>2</score>
</scores>
<scores>
  <Team>"Derry"</Team>
  <score>0</score>
</scores>
</score>

非常感谢您的帮助。

要实现这一点，您可以向所有想要更改的元素添加类标记。然后在Javascript中，您可以创建一个函数，将所有这些元素放在一个数组中，以便轻松更改。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Dynamic Table Content</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <div id="wrapper">          
            <table id="mytable" width="100%">
                <td style="vertical-align:top">
                    <tr>
                        <th> Team </th>
                        <th> Score </th>
                        <th> Team </th>
                        <th> Score </th>
                    </tr>
                    <tr>
                        <td>Dundalk</td>
                        <td class="score">1</td>
                        <td>Derry</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td>Derry</td>
                        <td class="score">0</td>
                        <td>Dundalk</td>
                        <td class="score">0</td>
                    </tr>
                    <tr>
                        <td>Drogheda</td>
                        <td class="score">1</td>
                        <td>Dundalk</td>
                        <td class="score">2</td>
                    </tr>
                </td>
            </table>            
            <button type="button" onclick="changeContent(0)">Add Point to Dundalk in Dundalk vs. Derry</button>
        </div>
    </body>
</html>

Javascript（也可以从另一个文件导入，例如它是内联的）：

<script>
    var scoretable;
    function initializetable(){
        scoretable = document.getElementsByClassName("score");
    }
    function changeContent(element){
        initializetable();
        scoretable[element].textContent = "NEW";
    }        
</script>

注意：在这个例子中，我在尝试更改内容时调用initialize（）函数，但最好早点调用这个函数，例如在加载页面时，而不是在按下按钮时调用它。

CSS:

body{
    background: black;   
}
#wrapper{
    position: absolute;
    left: 20%;
    right: 20%;
    top: 20%;
    bottom: 10%;
    background-color: black;
    border: 1px solid white;
    padding: 5px;
}
table{
    color: white;
    text-align: center;
}

在这个例子中，我只放了一个按钮，它调用changeContent（）函数来更改具有score类的第一个元素（记住从0开始计数！）。当然，可以通过更改参数值将其更改为另一个元素。此外，您可以选择为每个元素制作一个按钮来更改其值。

相关文章：