我有一个jquery循环,它显示按钮A - Z,但它的作用是连续显示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>
答案 0 :(得分:0)
[忽略]
$newBtn+"<tr></tr>"
那是一个jQuery实例+ String。
我认为这就是问题所在。
尝试将newBtn作为字符串保留到最后$answer.append($(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