Question

我想使用javascript生成可点击的表格。

我的代码无效。

我为行和列的获取值创建了2个文本输入字段。

将调用drawGrid()函数onClick事件的按钮。

 <input type="text" name="enter" class="enter" value="" id="inputX"/>
 <input type="text" name="enter" class="enter" value="" id="inputY"/>
 <input type="button" value="click" onclick="drawGrid();"/>

  <script language="JavaScript">          
  function drawGrid(){             
     document.write('<table border="1">');              
        var x_start = 1;
        var x_end = document.getElementById('inputX').value;
        var y_start = 1;
        var y_end = document.getElementById('inputY').value;
        // loop over all x values (rows) sequentally
        for( var x=x_start; x <= x_end; x++ ){
            // open the current row
            document.write('<tr>');
            // loop over all y values (cols) sequentally
            for( var y=y_start; y <= y_end; y++ ){
                // write out the current x/y coordinate with a table cell
                document.write('<td> x:'+x+' y:'+y+'</td>');
            }
            // end the current row
            document.write('</tr>');                    
            document.write('</table>');
        }
 }
</script>

Answer 1

首先，我认为值得做的几点：

document.write不是这项工作的最佳工具。
（并且更严重）再看看你的嵌套for循环。您执行外部循环宽度次数。在此循环中，您将创建一个新行，添加一些单元格，关闭该行，然后关闭该表。

再次阅读＃2 - 没错，您尝试制作width行数而不是height行数。您还 完成表格 每一行（但只启动表格一次）

这里有一些使用JS对象创建元素的代码（与js创建的文本字符串相对）

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    byId('goBtn').addEventListener('click', onGoBtnClicked, false);
}

function onCellClicked(evt)
{
    alert( this.innerHTML );
}

function onGoBtnClicked(evt)
{
    byId('tblTgt').innerHTML = '';
    var nCols = byId('inputX').value;
    var nRows = byId('inputY').value;

    var tbl, curRow, curCell;
    tbl = newEl('table');
    var x, y;
    for (y=0; y<nRows; y++)
    {
        curRow = newEl('tr');
        tbl.appendChild(curRow);

        for (x=0; x<nCols; x++)
        {
            curCell = newEl('td');
            curCell.addEventListener('click', onCellClicked, false);
            curCell.innerText = "[" + x + "," + y + "]";
            curRow.appendChild(curCell);
        }
    }
    byId('tblTgt').appendChild(tbl);
}

</script>
<style>

</style>
</head>
<body>
    nCols:<input type="text" name="enter" class="enter" value="" id="inputX"/><br>
    nRows:<input type="text" name="enter" class="enter" value="" id="inputY"/><br>
    <button id='goBtn'>click</button>
    <hr>
    <div id='tblTgt'></div>
</body>
</html>

如何使用Javascript生成可点击表格

1 个答案: