3

画像をテーブルに取り込もうとしています。画像が質問で、画像が答えで、それらを表で比較するようなものです。オンラインで検索しようとしましたが、実質的なものは見つかりませんでした。

<html>
  <head>
    <title>Game Selection</title>
    <script type="text/javascript">
      function gameddselected() {
        var gamedd = document.getElementById('gamedd');
        var x =document.getElementById('scoretable').rows
        var a=x[0].cells
        var b=x[1].cells
        var c=x[2].cells
        if (gamedd.value=='1') {
          a[0].innerHTML="Game1 Score Table"
        } else if (gamedd.value=='2') {
          a[0].innerHTML="Game2 Score Table"
        } else if (gamedd.value=='3') {
          a[0].innerHTML="Game3 Score Table"
        } else if (gamedd.value=='4') {
          a[0].innerHTML="Game4 Score Table"
        }
      }
    </script>
  </head>
  <body background="http://1.bp.blogspot.com/_68sk2PaFt3Q/Sl8n81IoRcI/AAAAAAAAEUw/AlnMPEC9uc0/s1600/Disable+File+Indexing+In+Windows++Speed+Up+Windows+By+Disabling+Search+Index+2.jpg" width="80%" height="80%">
    <h2 style="text-align: center;">
      <span style="font-size:18px;">
        <span style="font-family: arial, helvetica, sans-serif;">Please select a Game&nbsp;
        </span>
      </span>
    </h2>
    <form action="" method="POST" name="form2">
      <div align="center">Select:
        <select name="gamedd" id="gamedd" style="width:200px" onChange="gameddselected()">
          <option value="1">Game1</option><option value="2">Game2</option>
          <option value="3">Game3</option><option value="4">Game4</option>
        </select>
      </div>
    </form>
    <TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
      <TR>
        <TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
      </TR>
      <TR>
        <TH>Question Images</TH>
        <TH>Answer Images</TH>
        <TH>Score</TH>
      </TR>
      <TR ALIGN="CENTER">
        <TD>Data 1</TD>
        <TD>Data 2</TD>
        <TD>Data 2</TD>
      </TR>
    </TABLE>
  </body>
</html>

テーブルの Data1 の代わりに画像を生成したい。どうすればそれができますか？

どんな助けでも大歓迎です:)

4

2 に答える 2

2

HTML

<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3" ALIGN="CENTER" id="scoretable">
  <TR>
    <TH COLSPAN="3"><BR><H3>TABLE TITLE</H3></TH>
  </TR>
  <TR>
    <TH>Question Images</TH>
    <TH>Answer Images</TH>
    <TH>Score</TH>
  </TR>
  <TR ALIGN="CENTER">
    <TD>Data 1</TD>
    <TD>Data 2</TD>
    <TD>Data 2</TD>
  </TR>
</TABLE>

jquery と疑似コードを使用したCODE

$("#gamedd").change(function(){
    if selected == urCriteria then; 
    var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg');
    $(table tr:lastchild td:firstchild).append(img );
 });

ajax 呼び出しを使用して、画像文字列の URL を読み込むこともできます

于 2012-11-18T05:51:07.853 に答える
1

HTML

  <TR ALIGN="CENTER">
    <TD id="Data1">Data 1</TD>
    <TD id="Data2">Data 2</TD>
    <TD id="Data3">Data 3</TD>
  </TR>

コード

for(i=1;i<4;i++) {
  x=document.getElementById("Data"+i);
  x.innerHTML="<img src='/path/to/image"+i+".jpg' />";
// Assuming your images are named [something]NUMBER.jpg
// You could instead use an array
}

結果

<div>​
  <td id=​"Data1">​&lt;img src=​"/​path/​to/​image1.jpg">​&lt;/td>​
  <td id=​"Data2">​&lt;img src=​"/​path/​to/​image2.jpg">​&lt;/td>​
  <td id=​"Data3">​&lt;img src=​"/​path/​to/​image3.jpg">​&lt;/td>​
</div>​
于 2012-11-18T05:37:41.537 に答える