Javascript乘法表

Question

我正在尝试创建一个显示n × n表的表，其中包含以下详细信息：

• 大小（ n ）由用户输入确定
• 我想对偶数行使用某种颜色进行颜色编码，对奇数行使用另一种颜色进行颜色编码
• 结果将在新窗口/选项卡中弹出

这是我到目前为止的内容：

HTML：

<body>
    <form name="f"> 
        <input type="text" value ="r" size="6" name="r">
        <input type="text" value ="c" size="6" name="c">
        <input type="button" value="make table" onclick="happy(r.value,c.value)">
    </form>
</body>

JS：

function happy(rows, cols) {
    var hcode = '';

    w=window.open();
    w.document.write("<table border='1'>");
    for (i=0; i<=rows; i++) {
        w.document.write("<td>"+i)
    }

    for (j=1; j<=cols; j++) {
        var x = 0;
        w.document.write("<tr><td>"+j);
        //w.document.write("<td>"+j*x);
    }

    w.document.write("<tr>")
    for ( x=1; x<= rows; x++) {
        w.document.write("<tr>");

        for ( n=1; n<= cols; n++) {
            if (x %2==0 ) {
                w.document.write("<td bgcolor='aquamarine'>"+x*n+"</td>");
                if ( n<=cols) {
                    w.document.write()
                }
            }
            else {
                w.document.write("<td bgcolor='coral'>"+x*n+"</td>");
            }
        }
    }
    w.document.write('</table')

我玩了几个变种，但都没有找到需要的东西。 任何意见都欢迎！ 谢谢！

Answer 1

我试图了解需要。

http://jsfiddle.net/OxyDesign/kb294v6a/

是你想要的吗？

JS（使用jQuery）

$(document).ready(function(){
    makeTable();
    $('form').on('submit',function(e){
        e.preventDefault();
        makeTable();
    });
});

function makeTable(){
    var rows = parseInt($('input[name=r]').val()),
        col = parseInt($('input[name=c]').val());

    if(typeof rows === 'number' && rows > 0 && typeof col === 'number' && col > 0){
        var table = '<table>';
        for(var i = 1; i <= rows; i++){
            table += '<tr>';
            for(var j = 1; j <= col; j++){
                table += '<td>'+i*j+'</td>';
            }
            table += '</tr>';
        }
        table += '</table>';
        $('#table').html(table);
    }
}

Answer 2

如果您只是在寻找可以对每行设置样式的基本乘法表，则可以完成以下工作：

function multiplicationTable(x, y){
  var Y = typeof y === 'number' ? y : x;
  var table = '<table><tbody>';
  for(var i=0,l=Y+1; i<l, i++){
    table += i%2 === 0 ? "<tr class='odd'>" : "<tr class='even'>";
    table += '<th>'+i+'</th>';
    for(var n=1,c=x+1; n<c; n++){
      if(i === 0){
       table += '<th>'+n+'</th>';
      }
      else{
        table += '<td>'+i*n+'</td>';
      }
    }
    table += '</tr>';
  }
  return table + '</tbody></table>';
}
document.getElementById('id').innerHTML = multiplicationTable(12);
console.log(multiplicationTable(15, 25));