テーブル情報を更新するHTMLページにボタンを追加

私は以下のようにテーブルを作成し、クリックしたときにスコア情報を更新するonclick関数を持っています。私は非常に効率的ではないと思うし、テーブル内のIDの繰り返しと私の関数のgetElementbyIdのリストの表示を避けることを好むでしょう。テーブル情報を更新するHTMLページにボタンを追加

第2に、私はむしろデータ、JavaScript、XMLファイルまたはデータベースファイルの代わりに、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ファイルを作成している次のように

</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があります

<?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>

ご協力いただきまして誠にありがとうございます。

出典

2016-04-04 NiallL

私はこの質問にすでに答えていると確信しています...学校プロジェクトの質問のようです。 – Chris

クリスマスに申し訳ありませんが私はあなたの答えを逃した。私は数時間前に質問を投稿しましたが、それは十分正確ではなかったので、わかりやすくするために絞り込んで再度投稿しました。私はjavascriptについて何も知らないので、私は進歩を遂げるのに苦労しています。私は自分のテーブルや一般的なページレイアウトなどを構築することができましたが、この機能を追加する方法を理解する必要があります。 – NiallL

これを行うには、変更したいすべての要素にクラスタグを追加します。次に、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：（！0から数えて覚えている）私は、スコア・クラスを持つ最初の要素を変更するchangeContent（）関数を呼び出すだけで一つのボタンを入れている例では

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; 
}

。これは、パラメータ値を変更することによって、別の要素に変更することができます。また、すべての要素がその値を変更するためのボタンを作ることもできます。

出典

2016-04-04 21:16:10 svanderwoude

これは私が達成しようとしているように聞こえます。 – NiallL

Svanderwoude上記のコードを使ってテーブルのスコアセクションにタグを割り当てる例を挙げてもらえますか？私は原理的にはどのように動作するのか理解していますが、テーブル内でどのように分解するのか分かりません。 – NiallL

0 – lauriys

テーブル情報を更新するHTMLページにボタンを追加

答えて

関連する問題