iMath Wiki - tables-html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Интерактивный генератор таблиц сложения и умножения</title>
  <style type="text/css">
    td {
      border: solid 1px black;
      text-align: center;
      min-width: 2em;
    }

    tr > td:first-of-type {
      border-right: double;
    }

    thead tr {
      border-bottom: double;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      margin: 5em;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id="form">
    <input id="textbox" type="number" min="0" step="1" value="16">
    <input type="button" onclick="generate()" value="Генерировать!">
  </div>
  <div id="tables">
  </div>
  <script type="text/javascript">
    function represent(i) {
        symbs = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
        if(i < 36)
            return symbs[i]
        else
            return '[' + i + ']'
    };

    function show_base(basen, val) {
        result = ''
        while(true) {
            quot = Math.floor(val / basen)
            rem = val % basen
            val = quot
            result = represent(rem) + result
            if(val == 0)
                break
        }
        return result
    }

    function row(oper, basen, i) {
        result = ''
        for(var start=0; start<basen; ++start)
            result += '<td>' + show_base(basen, oper(start, i)) + '</td>'
        return result
    }

    function table(oper, basen){
        result = ''
        for(var start=0; start<basen; ++start)
            result += '<tr><td>' + show_base(basen, start) + '</td>' + row(oper, basen, start) + '</tr>'
        return result
    }

    function md_table(oper, basen, type){
        return '<table><caption>Таблица ' + type + ' ' + basen + '-ичной системы счисления</caption>' +
          '<thead><td></td>' + row(function(x,y){return x*y}, basen, 1) +
          '</thead><tbody>'+table(oper, basen)+'</tbody></table>'
    }

    function generate() {
      BASE = +document.getElementById("textbox").value

      document.getElementById("tables").innerHTML =
        md_table(function(x,y){return x+y}, BASE, 'сложения') +
        md_table(function(x,y){return x*y}, BASE, 'умножения');
    }
  </script>
</body>
</html>