행의 마지막 버튼이 누락되었습니다.

Question

버튼 A - Z를 표시하는 jquery 루프가 있지만 행의 7 개 버튼이 표시됩니다. 그래서 아래처럼 보일 것입니다 :

A B C D E F G 
    H I J K L M N 
    O P Q R S T U 
    V W X Y Z 

그러나이 루프로 인해 각 행의 마지막 버튼이 누락되는 문제가 있습니다. 따라서 버튼 G, N 및 U가 누락되었습니다. 나는 그들이 왜 빠졌는지 알고 싶습니다. 그리고이 버튼과 나머지 버튼을 보여주기 위해 아래의 코드를 어떻게 수정할 수 있습니까?

var i = 1; 

    $('#optionAndAnswer .answers').each(function() { 
     var $this = $(this); 
     var $newBtn = ''; 
     if($this.is(':visible')){ 
      $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     }else{ 
      $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     } 

        if(i % 7 == 0){ 
       $answer.append($newBtn+"<tr></tr>"); 
      } 
      else 
      $answer.append($newBtn);     
      i = i+1; 
     }); 




PHP CODE: 


<?php 
    $a = range("A","Z"); 
?> 

    <table> 
     <tr> 

    <?php 
     $i = 1; 
     foreach($a as $key => $val){ 
      if($i%7 == 1) echo"<tr><td>"; 
      echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\" style=\"display: inline;\">";  
      if($i%7 == 0) echo"</td></tr>"; 
      $i++; 
     } 
    ?> 
     </tr> 
    </table> 

Answer 1

JQuery와 인스턴스 + 문자열이다

$newBtn+"<tr></tr>" 을 [무시]. 그게 문제가있는 곳이라고 생각합니다. 마지막으로 $answer.append($(newBtn));까지 newBtn을 문자열로 유지하십시오.

[/ 무시] 그냥 하나의 문자열을 구축 시도하고 성가신 것으로 판명

.

다음 솔루션은 원래의 의도에 가까운,하지만 잘못된 HTML 조각 "</tr><tr>" 추가하려고의 함정 피 :

var $this, i=0, $row, $cell; 
$('#optionAndAnswer .answers').each(function() { 
    $this = $(this); 
    if(i%7 == 0) { 
     $row = $('<tr />').appendTo($answer); 
     $cell = $('<td />').appendTo($row); 
    } 
    $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).appendTo($cell); 
    i++; 
}); 

Tested only for synatax errors