使用javascript显示动态创建的表的tr和td的索引?

时间:2018-01-18 11:35:29

标签: javascript html css

我创建了一个表/矩阵,使用javascript我想打印表行和表数据的索引点击表数据

<html>
    <head>
    <title>Table Creation</title>

    <script language="javascript" type="text/javascript">
    function createTable()
    {
        document.write("<table >");

        for (var x = 1; x < 10; x++) {
            document.write("<tr >");

            for(var y = 1; y < 10; y++) {
                document.write("<td><button>index</button></td>");
            }

            document.write("</tr>");
        }

        document.write("</table>");
    }
    </script>
    </head>

    <body>
        <button onclick="createTable()">Try it</button>
        <div >
        </div>
    </body>
    </html>
</html>

例如,对于row1警报应该是((1,1),(1,2),(1,3)....),对于row2警报应该是((2,1),(2, 2),(2,3))

3 个答案:

答案 0 :(得分:3)

检查一下:

<html>
<head>
<title>Table Creation</title>

<script language="javascript" type="text/javascript">
function createTable()
{
document.write("<table >");
for (var x=1; x <10; x++) {
document.write("<tr >");
for(var y=1; y<10; y++) {

document.write("<td><button onclick='alertButton("+x+","+y+")'>index</button></td>");

}
document.write("</tr>");
}
document.write("</table>");
}
function alertButton(row, col){
    alert('('+row+','+col+')');
}
</script>
</head>
<body>
<button onclick="createTable()">Try it</button>
<div >
</div>

</body>
</html>
</html>

答案 1 :(得分:0)

试试这个:

替换你的行

document.write("<td><button>index</button></td>");

通过

document.write("<td><button onclick='getIndex(this)'>index</button></td>");

并添加此功能

function getIndex(elem){
  alert(elem.closest('tr').rowIndex + "," 
  + elem.closest('td').cellIndex);
}

答案 2 :(得分:0)

<html>
    <head>
    <title>Table Creation</title>

    <script language="javascript" type="text/javascript">
    function createTable()
    {
    document.write("<table >");
    for (var x=1; x <10; x++) {
    document.write("<tr >");
    for(var y=1; y<10; y++) {

    document.write("<td><button>("+x+","+y+")</button></td>");

    }
    document.write("</tr>");
    }
    document.write("</table>");
    }
    </script>
    </head>
    <body>
    <button onclick="createTable()">Try it</button>
    <div >
    </div>

    </body>
    </html>
    </html>