我想多次调用同一个函数,而不会丢失它的预览输出。我不想使用数据库。我该怎么用?

时间:2016-11-30 20:12:15

标签: javascript jquery

我需要通过调用相同的函数来生成多个表。当我这样做时,预览表会丢失,因为我记得这个功能。我是JavaScript的新手。你能告诉我应该用什么吗?注意:我不想使用数据库来保存信息。我不确定我是否应该使用Ajax,或者还有一些其他简单的方法,只需使用JavaScript。

    <form>
        Row: <input type="text" id="x"    />
        Columns:<input type="text" id="y"  />
        <input type="button"  value="OK" onclick='createTable();'></input>
    </form>
    <div id="table"></div>
    <script>
    function createTable(){

            var x= document.getElementById("x").value;
            var y= document.getElementById("y").value;

            var rX = parseInt(x);
            var cY = parseInt(y);

            var theader = '<table>\n';
            var tbody = "";

            for(i= 1; i <= rX; i++){
                tbody += '<tr>';

                for (j = 1; j<= cY; j++){

                    tbody += '<td>';
                    tbody  += i +':' +j;
                    tbody += '</td>';
                }

                tbody += '</tr>\n';
            }

            var tfooter = '</table>';

            document.getElementById("table").innerHTML = theader + tbody + tfooter;}
      </script>

1 个答案:

答案 0 :(得分:1)

您可以将新表添加到输出中的最后一个表

document.getElementById("table").innerHTML += theader + tbody + tfooter;
//                                         ^

&#13;
&#13;
function createTable() {
  var x = document.getElementById("x").value;
  var y = document.getElementById("y").value;
  var rX = parseInt(x, 10); // add base
  var cY = parseInt(y, 10); // add base
  var theader = '<table>\n';
  var tbody = "";

  for (i = 1; i <= rX; i++) {
    tbody += '<tr>';
    for (j = 1; j <= cY; j++) {
      tbody += '<td>';
      tbody += i + ':' + j;
      tbody += '</td>';
    }
    tbody += '</tr>\n';
  }
  var tfooter = '</table>';
  document.getElementById("table").innerHTML += theader + tbody + tfooter;
}
&#13;
<form>
  Row:
  <input type="text" id="x" />Columns:
  <input type="text" id="y" />
  <input type="button" value="OK" onclick='createTable();'></input>
</form>
<div id="table"></div>
&#13;
&#13;
&#13;