JS实现:table点击鼠标如何获取行号跟该单元的值

JS实现:table点击鼠标如何获取行号跟该单元的值,第1张

<td onmousedown="doit(this)">9:00-12:00</td>

function doit(e)

{

var tr = eparentNode;

var i = 0;

while(trpreviousSibling) i++;

alert("行号:"+i+"; 值:"+einnerHTML);

}

这样?

<script>

windowonload = function(){

    var obj = documentgetElementById("table1");

    var arr = [];

    var lines = [];

    var rows = objtBodies[0]rows;

    for(var i = 0; i < rowslength; i++){

        var str = rows[i]cells[0]innerHTML;

        if(arrlength){

            for(var j = 0; j < arrlength; j++){

                if(arr[j] == str){

                    linespush("\n行:" + j + " - " + i);

                }

            }

        }

        arrpush(rows[i]cells[0]innerHTML);

    }

    alert("相同内容的行为:" + linesjoin());

}

</script>

我们仅仅知道用户点击的那一条数据,所以这条数据必须是唯一的才能构建一颗唯一的树结构,如果后端给不到你唯一的值,一定要让他给你生成一个唯一值id

我采用的string切割插入值

table初始化进来只有一层,并且是固定的

此时生成的是

你可以使用 JavaScript 中自带的 rowIndex 和 cellIndex 来获取行和列的键值 (从0开始)

点击 checkbox,获取 parentNode (也就是 td),tdcellIndex 就是所在列的键值

点击 checkbox,获取 parentNodeparentNode (也就是 tr),trrowIndex 就是所在行的键值

<script type="text/javascript">

// 点击

documentonclick = function(e) {

    // 兼容 event 和 target

    e = e || windowevent;

    var target = etarget || esrcElement;

    // 确认是 checkbox

    if(targettagNametoLowerCase() === "input"

        && targettype === "checkbox") {

        // 获取行列键值

        var row_num = targetparentNodeparentNoderowIndex;

        var col_num = targetparentNodecellIndex;

        // 输出

        alert(row_num + " " + col_num);

    }

};

</script>

因为键值是从 0 开始,一般需要 +1 才是行列数,但因为你表单中第一行个第一列都是文字,所以不需要 +1 正好输出需要的数字,例如点击周四 + 6,会输出 4 6

JS获取表格行数和列数

<html>

<head>

<script type="text/javascript">

function show()

{

var tab = documentgetElementById("test") ;

//表格行数

var rows = tabrowslength ;

//表格列数

var cells = tabrowsitem(0)cellslength ;

alert("行数"+rows+"列数"+cells);

}

</script>

</head>

<body>

<table id="test" border="1">

<tr>

<td> </td><td>nbsp;</td>

</tr>

<tr>

<td> </td><td>nbsp;</td>

</tr>

</table>

<input type="button" onclick="show();"/>

</body>

</html>

var tds = tablegetElementsByTagName("td");

for(var i=0,l=tdslength; i<l; i++){

    tds[i]styleborder = '';

}

以上就是关于JS实现:table点击鼠标如何获取行号跟该单元的值全部的内容,包括:JS实现:table点击鼠标如何获取行号跟该单元的值、JS如何获取TD内容、JS树结构生成与获取到根节点的路径等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9564548.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存