82547


神経衰弱を作っていたのですが、表を作成してHTMLの方に表示すると余計なtdタグが入ってしまいます。

おかしくなるあたりの流れは以下の通りです。  
・山札の配列作成  
・山札をシャッフル  
・横8、縦7でtableタグを作成(山札をループして、横と縦をそれぞれ変数に入れてif文で初期化などをする)  
・tableタグをHTMlに反映

上記の流れの最後で反映させると、なぜかtdタグが二倍になります。  
[正しい表示]  
`<td>裏</td><td>裏</td><td><裏/td>`

[実行するとされる表示]  
`<td>裏</td><td></td><td>裏</td><td></td>`

[試したこと]  
・反映させる前に空のtdタグだけをreplaceで置換(正しい表示にはidなどが入っているのでそれなら間違っているものだけ消えると思った為)  
→表示結果変わらず

・console.log()を使用し、ちゃんと配列内の値が入っているかをループした。  
→ちゃんと配列内の値が入っている。

・tableタグをhtmlに入れる直前にconsoe.log()で確認  
→空白のtdタグは入っていないのにも関わらず、表示結果には空白のtdタグが追加されてしまっている。

もし足りない情報などありましたら申し訳ございません。  
お知恵をお貸しください。  
以下がその問題のコードです。

[code]

    <html>
      <head></head>
      <body>
        <span id="info">
        <p>一枚目:<span id="one_card"></span></p>
        <p>二枚目:<span id="two_card"></span></p>
        <span id="results">点数：<span id="result">0</span></span>
        </span>
        <span id="item"></span>
        
      </body>
    </html>
    
[/code]

[code]

    $(function(){
      let cards = [];//山札
      let results = 0;
      let distribute = [];//配布用のカード
      let html = "<table id='tramp'><tr>";//HTML用
      let one_num, two_num;//比較用の数字を入れる変数
      let one_x, one_y, two_x, two_y;
      //山札にジョーカー以外の札を入れる
      for(let i=1; i<14; i++){
        cards.push("h"+i);
        cards.push("d"+i);
        cards.push("c"+i);
        cards.push("s"+i);
      }
      //配列をシャッフル
      arrShuffle(cards);
      console.log(cards.length);
      //配布用の配列に入れる
      let num = 0;
      for(let i=0; i<13; i++){
        let suji = [];
        for(let j=0; j<4; j++){
          suji.push(cards[num]);
          num++;
        }
        distribute.push(suji);
      }
      num = 0;
      let x = 0;
      let y = 0;
      let w = 0;
      let h = 0;
      //裏面表示で配る(idをx_yに形式にする)
      for(let i=0; i<cards.length; i++){
        if(w > 7){
          html += "</tr><tr>";
          w = 0;
          h++;
        }
        if(x > 12){
            x = 0;
            y++;
          }
        console.log(w + ", " + h);
        html += "<td id='" + x + "_" + y + "'>裏<td>";
          x++;
          w++;
        
      }
      html += "</tr></table>";//ここでtableをspanに代入している
      
      //以下、カードをめくるなどの処理
    
    //コピペしたシャッフル用関数
      function arrShuffle(arr){
      let len = arr.length;
      while(len > 0){
        let rnd = Math.floor(Math.random() * len);
        let tmp = arr[len-1];
        arr[len-1] = arr[rnd];
        arr[rnd] = tmp;
        len-=1;
      }
    }
    });
    
[/code]


CC BY-SA 4.0
2021-09-17T04:13:07.987
82544
2021-09-17T04:48:31.900
2021-09-17T04:33:10.523
46953
46953
question
javascript html jquery
jqueryでhtmlのtableタグを作成、追加すると余計な表のセルが追加されて表示されてしまいます。


正しくタグが閉じられていないためブラウザで補完されているだけでは？

元のソース

[code]

    html += "<td id='" + x + "_" + y + "'>裏<td>";
    
[/code]

直したソース

[code]

    html += "<td id='" + x + "_" + y + "'>裏</td>";
    
[/code]


CC BY-SA 4.0
2021-09-17T04:48:31.900
82547
2021-09-17T04:48:31.900
22665
82544
answer