将按钮添加到更新表格信息的 HTML 页面答案

【问题标题】：Add button to HTML page which updates table information将按钮添加到更新表格信息的 HTML 页面
【发布时间】：2016-04-06 03:44:39
【问题描述】：

我创建了一个如下表，并有一个 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一无所知，所以我很难取得任何进展。我已经设法构建了我的表格和一般页面布局等，但只需要弄清楚如何添加此功能。

标签： javascript jquery html json xml

【解决方案1】：

要实现这一点，您可以将类标签添加到要更改的所有元素。然后在 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-class 的第一个元素（记住从 0 开始计数！）。这当然可以通过更改参数值来更改为另一个元素。你也可以选择为每个元素制作一个按钮来改变它的值。

【讨论】：

这听起来确实像我想要实现的目标。
Svanderwoude 我可以请您举个例子，使用我上面的代码将标签分配给表格的得分部分吗？我原则上理解这是如何工作的，但不知道如何在表格中分解它。
0
好吧，如果你想改变表格中的分数，你应该给所有相应的表格元素一个类。例如，要使标题可编辑，代码将是：Score。通过有一个按钮：您可以在导入的文件或内联 javascript 中调用函数 changetitle()。然后，此函数将包含以下行： document.getElementById("scoretitle").innerHTML = "New Score Title";通过添加 if 语句，您当然可以根据当前内容决定新内容应该是什么。
我将答案更改为包含示例代码和一些简单的样式，希望您能理解。