Question

我创建了一个如下表格，并有一个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>

非常感谢任何帮助。

Answer 1

要实现这一点，您可以将class-tags添加到要更改的所有元素中。然后在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开始计数！）。通过改变参数值，可以将其改为另一个元素。您还可以选择为每个元素创建一个按钮来更改它的值。

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

1 个答案: