2

我又遇到了一个问题（请配合我的愚蠢问题，我对 JavaScript 很陌生）。我正在尝试理解 JavaScript 中动态表的概念。当然我通过谷歌，但无法理解这个概念:(

我有两个文本框（tb1，tb2），分别用于输入行数和列数。因此，当我单击按钮 (b1) 时，它应该根据文本框中给定的行数和列数创建表格。这是我目前所知道的。。

<script type = "text/javascript">

function createTable(){
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;

    if(a=="" || b==""){
        alert("Please enter some numeric value");
        }else{
        .......the creating table code goes here.....   

        }
    }

}

</script>

我将在按钮 onClick="createTable()" 中调用 createTable 函数。非常感谢任何帮助。

4

3 回答 3

1

这是使用innerHTML的另一个解决方案

<script type = "text/javascript">

function createTable(){

var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;
var resultTable = '<table>';

if(a=="" || b==""){
    alert("Please enter some numeric value");
    }else{
         for(var i=0;i<parseInt(a);i++){
              resultTable += '<tr>';
              for (var j=0;j<parseInt(b);j++)
                   resultTable +='<td><\/td>';
              }
              resultTable +='<\/tr>';

         }
    resultTable+='<\/table';
    }
    return resultTable;

}

</script>

之后，只需使用 innerHTML 将结果添加到您想要的任何元素，例如，如果您有：

<div id='myElement'></div>

然后您可以将表格添加到元素（在任何 js 函数中），如下所示：

var targetElement = document.getElementById('myElement');
targetElement.innerHTML = createTable();

否则，您可以删除该行：

return resultTable;

并将表格直接添加到函数内部的元素中，如下所示：

var target = document.getElementById('myElement');
target.innerHTML=resultTable;
于 2012-06-27T10:11:59.023 回答
1

这是您的功能： 

function createTable(){
    var a = document.getElementById("tb1").value;
    var b = document.getElementById("tb2").value;

        if(a=="" || b==""){
            alert("Please enter some numeric value");
            }else{


            row=new Array();
        cell=new Array();

        row_num=parseInt(a); //edit this value to suit
        cell_num=parseInt(b); //edit this value to suit

        tab=document.createElement('table');
        tab.setAttribute('id','newtable');

        tbo=document.createElement('tbody');

        for(c=0;c<row_num;c++){
        row[c]=document.createElement('tr');

        for(k=0;k<cell_num;k++) {
        cell[k]=document.createElement('td');
        cont=document.createTextNode((c+1)*(k+1))
        cell[k].appendChild(cont);
        row[c].appendChild(cell[k]);
        }
        tbo.appendChild(row[c]);
        }
        tab.appendChild(tbo);
        document.getElementById('mytable').appendChild(tab);//'myTable' is the parent control of your table, change it as per your requirements
                }
            }

        }

将此属性添加到您的按钮 b1 onclick="createTable();"

于 2012-06-27T10:04:10.003 回答
1

JS 

function createTable() {
    var a, b, tableElem, rowElem, colElem;

    a = document.getElementById('tb1').value;
    b = document.getElementById('tb2').value;

    if (a == "" || b == "") {
        alert("Please enter some numeric value");
    } else {
        tableElem = document.createElement('table');

        for (var i = 0; i < a; i++) {
            rowElem = document.createElement('tr');

            for (var j = 0; j < b; j++) {
                colElem = document.createElement('td');
                colElem.appendChild(document.createTextNode(j + 1)); //to print cell number
                rowElem.appendChild(colElem);
            }

            tableElem.appendChild(rowElem);
        }

        document.body.appendChild(tableElem);


    }
}

JSFiddle
http://jsfiddle.net/mprRb/1/

于 2012-06-27T10:37:26.803 回答