Question

Is it possible to write a nested for loop that builds a table and where the perfect squares are in bold?

I have this much now

<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>

But I want to highlight the perfect squares in the table.
Does anyone

Answer 1

http://jsfiddle.net/mmhDR/

j is often used as the second loop variable, k after that, etc.

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);
};

edit: Using 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>