Question

我正在忙着创建一个网站，用户必须从巨大的复选框矩阵中选择一些复选框。 100乘100 = 10 000箱更具体！

我这样做的方法是创建100个垂直div，每个div包含100个复选框。

这似乎工作正常，但它最终成为了大量的代码！这么多，当我在Dream Weaver中点击刷新时，它会崩溃！

我是HTML和Javascript的新手。有没有更好的方法呢？

我包含了一个非常小的基本例子，我做了什么

<html lang="en"><head><meta name="generator" content="PSPad editor, www.pspad.com">
<title>Checkbox No Vertical Space</title>
<style type="text/css">
#aDiv,
#bDiv,
#cDiv{
    float:left;
    width:12px;
}

#aDiv input,
#bDiv input,
#cDiv input{
    clear:left;
    float:left;
    margin:0;
    padding:0;
    width:12px;
    height:12px;
}
</style></head><body>

<div id="aDiv">
    <input type="checkbox" value="a1">
    <input type="checkbox" value="a2">
    <input type="checkbox" value="a3">
    <input type="checkbox" value="a4">
    <input type="checkbox" value="a5">
    <input type="checkbox" value="a6">
</div>

<div id="bDiv">
    <input type="checkbox" value="b1">
    <input type="checkbox" value="b2">
    <input type="checkbox" value="b3">
    <input type="checkbox" value="b4">
    <input type="checkbox" value="b5">
    <input type="checkbox" value="b6">
</div>

<div id="cDiv">
    <input type="checkbox" value="c1">
    <input type="checkbox" value="c2">
    <input type="checkbox" value="c3">
    <input type="checkbox" value="c4">
    <input type="checkbox" value="c5">
    <input type="checkbox" value="a6">
</div>

</body></html>

谢谢！

阿伦

Answer 1

此代码表现良好：

var i, j, div, cb, frag;

frag = document.createDocumentFragment();
cb = document.createElement( 'input' );
cb.type = 'checkbox';

for ( i = 0; i < 100; i += 1 ) {
    div = document.createElement( 'div' );

    for ( j = 0; j < 100; j += 1 ) {        
        div.appendChild( cb.cloneNode( false ) );
    }    

    frag.appendChild( div );
}

document.body.appendChild( frag );

现场演示： http://jsfiddle.net/Kyswa/1/show/

（虽然我的机器在滚动页面时出现性能问题）

Answer 2

我继续制作了这个jQuery版本，并确保宽度是动态计算的，以确保您在浏览器中有100x100个复选框。我还在复选框中添加了一些html5数据属性，因此您不必每次都计算它。此外，还有一个事件连接到包含div，因此事件将表现良好。这是代码：

<强> HTML

<div id="checkboxes">
</div>

<强> CSS

#checkboxes {
    line-height: 0;
}

#checkboxes input[type="checkbox"] {
    margin: 0px;
    padding: 0px;
}

JavaScript + jQuery 1.7

$(function(){

    var target = $('#checkboxes');

    var x, y, checkbox;
    for(x = 0; x < 100; x++)
    {
        for(y = 0; y < 100; y++)
        {
            checkbox = $('<input></input>', {
                'type': 'checkbox',
                'data-x': x,
                'data-y': y
            });

            target.append(checkbox);
        }
    }

    target.width(checkbox.outerWidth() * 100);

    target.on('change', 'input:checkbox', function(){

        var $this = $(this),
            x = $this.data('x'),
            y = $this.data('y'),
            checked = $this.prop('checked');

        alert('checkbox changed (' + x + ', ' + y + '): ' + checked);
    });

});

示例

http://jsfiddle.net/xixonia/Uq7CU/1/

这是一个有趣的版本，您可以通过将鼠标移到复选框上进行绘制：

http://jsfiddle.net/xixonia/Uq7CU/2/

Answer 3

这可能不是正确的HTML或遵循建议的指南，但您可以使用<table></table>。摆脱您的<div></div>，将<div></div>设为ID为“网格”，并将其添加到您的javascript：

var grid = "";
grid += "<table>";
for (var row = 0; row < 100; row++)
{
   grid += "<tr>";
   for (var col = 0; col < 100; col++)
   {
      grid += "<td>";
      grid += "<input type='checkbox' value='" + row + "-" + col + "'>";
      grid += "</td>";
   }
   grid += "</tr>";
}
grid += "</table>";
document.getElementById("grid").innerHTML = grid;

如果这不起作用或者有任何错误，请告诉我！

Answer 4

你必须有复选框吗？

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<style>
table{layout:fixed;width:95%;margin:0 auto;}
td{border:ridge thin gray;width:1%;font-size:8px;color:white;background-color:white;padding:0}
td:hover{background-color:blue}
input{font-size:smaller}
</style>
</head>
<body>
<h1>Boxes<br>
<input type="text" size="20" value=""></h1>

<script>
onload= function(){
    document.getElementsByTagName('table')[0].onclick= function(e){
        e= e || window.event;
        var r= 0, c= 0, row, col,
        who= e.target || e.srcElement,
        msg= document.getElementsByTagName('input')[0];
        if(who.tagName== 'TD'){
            who.style.backgroundColor= 'red';
            msg.value= who.id.replace('r','row: ').replace('c',' col: ');
        }
    }
}
var r= 1, c= 1, str= '<table cellspacing="0" cellpadding="0">\n<tbody>';
while(r<101){
    str+= '\n<tr>';
    c= 1;
    while(c<101){
        str+= '<td id="r'+r+'c'+c+'">x</td>';
        ++c;
    }
    str+= '</tr>';
    ++r;
}
str+='</tbody>\n</table>\n';
document.write(str);
</script>
<br>
</body>
</html>

如何创建一个巨大的复选框表（我的意思是巨大的！）

4 个答案: