Javascript Multiplication table

Javascript Multiplication table

本文关键字：table Multiplication Javascript      更新时间：2023-09-26

我正试图创建一个表，显示一个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')

我玩过一些变体，但没有一个能满足我的需求。欢迎任何建议！谢谢

我试图理解这种需求。

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

如果你只是在寻找一个基本的乘法表，在那里你可以对每一行进行样式设置，这应该可以完成任务：

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));
相关文章：