用粗体标记嵌套for循环

时间:2012-01-23 02:28:02

标签: javascript for-loop nested

是否可以编写构建表格的嵌套for循环以及完美正方形以粗体显示的位置?

我现在有这么多

<table border=1 cellpadding=10>
<script type="text/javascript">
    for (j=1; j<=10; j++) {
        document.write('<tr>');
        for (i=1; i<=10; i++) {
            document.write('<td align ="center">',i*j,'</td>');
        }
        document.write("</tr>\n");  
    }
</script>

但我想强调表格中的完美方块。 有没有人

2 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/mmhDR/

j通常用作第二个循环变量,之后是k等等。

window.onload=function(){
    var t = document.createElement('table');
    for(var i =1;i<11;i++){
        var tr = document.createElement('tr');
        for(var j=1;j<11;j++){
            var td=document.createElement('td');
            td.innerHTML=''+(j*i);
            if(j==i){
                td.className="bold";
            }
            tr.appendChild(td);
        }
        t.appendChild(tr);
    }
    document.body.appendChild(t);
};

编辑:使用document.write():

http://jsfiddle.net/8vTg7/

<style type="text/css" >
table{
    margin:10px;
}
td{
    text-align:center;
    padding:5px;
    border:1px solid grey;
}
.bold{
    font-weight:bold;
}
</style>
<script type="text/javascript">
document.write('<table>');
    for(var i =1;i<11;i++){
        document.write('<tr>');
        for(var j=1;j<11;j++){
            document.write('<td ');
            if(j==i){
                document.write('class="bold"');
            }
            document.write('>');
            document.write(''+(i*j));

            document.write('</td>');
        }
        document.write('</tr>');
    }
    document.write('</table>');
</script>

答案 1 :(得分:0)

以下是我解决问题的方法。

 <table border="1"> 
 <script type="text/javascript"> 
   var outHTML="";
   var r, c;
     for (r=1;r<=10;r++) {

       outHTML += "<tr>";
        for (c=1;c<=10;c++) {
           if (r==c)
             outHTML += "<td><strong>" + (r*c) + "</strong></td>";
         else
            outHTML += "<td>" + (r*c) + "</td>";
       }
     outHTML += "</tr>";
   }
    document.writeln(outHTML);    
</script> 
</table>