我有一个脚本可以将选择列表转换为复选框表;
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
var ind = $(this).index();
if (ind % 3 === 0 ) {
$('#checkboxes tbody').append('</tr><tr><td><input type="checkbox" value="'+value+'">' + label + '</td>');
}
else {
$('#checkboxes tbody').append('<td><input type="checkbox" value="'+value+'">' + label + '</td>');
}
});
$('#edit-taxonomy-1').replaceWith($("#checkboxes"));
但是我不能让每一个第三个元素都很好地出现在新行中。
这是一个小提琴:http://jsfiddle.net/cxVhz/
它显示了我拥有的和我想要的东西
答案 0 :(得分:4)
我认为append()
正在做幕后的事情,可能会在你追加它之前“修复”你的HTML。
尝试这种类似的方法:
var tr = "";
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
var ind = $(this).index() + 1;
// continually build your checkbox and label
var checkbox = '<input type="checkbox" value="'' + value + ''" />'
+ label;
// keep adding to your tr
tr += "<td>" + checkbox + "</td>";
if (ind % 3 == 0) {
// append the tr and clear its value
$('#checkboxes tbody').append('<tr>' + tr + '</tr>');
tr = "";
}
});
// if ind % 3 was never hit above, output what is within tr
if (tr != "")
{
$('#checkboxes tbody').append('<tr>' + tr + '</tr>');
}
工作示例:http://jsfiddle.net/cxVhz/18/
超级更新解决方案:
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody></tbody></table>');
$('#edit-taxonomy-1 option').each(function(index) {
var $this = $(this);
if (index % 3 === 0 ) {
$('#checkboxes tbody').append('<tr></tr>');
}
$('#checkboxes tbody tr:last').append('<td><input type="checkbox" value="'' + $this.val() + ''" />' + $this.html()+ '</td>');
});
$('#edit-taxonomy-1').replaceWith($("#checkboxes"));
答案 1 :(得分:1)
这是快速而正常的工作更新,无需重构代码。 http://jsfiddle.net/cxVhz/22/ 编辑:不需要表声明中的tr。替换为
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody></tbody></table>');
答案 2 :(得分:0)
看起来好像是将TD直接附加到表体而不是表行:
$('#checkboxes tbody').append('<td><input type="checkbox" value="'+value+'">' + label + '</td>');
编辑:
var row = $('<tr></tr>');
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
var ind = $(this).index();
if (ind % 3 === 0 ) {
$('#checkboxes tbody').append(row);
row = $('<tr></tr>');
var td = $('<td><input type="checkbox" value="'+value+'">' + label + '</td>');
row.append(td);
}
else {
$('<td><input type="checkbox" value="'+value+'">' + label + '</td>').appendTo(row);
}
});
if(row.html().length>0){
$('#checkboxes tbody').append(row);
}
答案 3 :(得分:0)
前面的例子有额外的TR,所以我想你可能想看到这个解决方案。祝你好运:http://jsfiddle.net/cxVhz/23/
答案 4 :(得分:0)
这个JS可以工作。
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
var ind = $(this).index();
if (ind % 3 === 0) {
$('#checkboxes tbody').append('<tr></tr>');
}
$('#checkboxes tbody tr:last-child').append('<td><input type="checkbox" value="'+value+'">' + label + '</td>');
});