使用JavaScript在表中指定位置插入一行

最新推荐文章于 2024-09-30 14:52:44 发布

ictliujie

最新推荐文章于 2024-09-30 14:52:44 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB 文章标签： javascript input safari insert button border

本文链接：https://blog.youkuaiyun.com/ictliujie/article/details/4261075

WEB 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript在HTML表格中根据鼠标点击的位置动态插入行。通过监听鼠标点击事件确定插入位置，并提供了插入行的示例代码。文章还提到了一个常见错误：在点击插入行按钮时误触发行插入，以及如何通过添加额外的判断来解决这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学JavaScript，下面是我自己做的一个例子（在w3cschool例子的基础上）

该例子实现功能是在鼠标点击的行之后插入一行，默认是在第一行插入。插入的内容可以自己输入，代码如下

<html>
<head>
<script type="text/javascript">

//global var
var pos =0

//to find the position you mouse has pressed
function whichElement(e)
{

    var targ
    if (!e) var e = window.event
    if (e.target) targ = e.target
    else if (e.srcElement) targ = e.srcElement
    if (targ.nodeType == 3) // defeat Safari bug
       targ = targ.parentNode
    if(targ.tagName=="TD"){//to adjust whether the element is tabledata

       pos = targ.parentNode.rowIndex+1
    }
    else if(tagName=="INPUT"){

       //to do nothing
    } else{
        pos =0
    }

    //alert(pos)
}

//to insert a row in the place
function insRow()
{

//alert(pos)
var x=document.getElementById('myTable').insertRow(pos)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML=document.getElementById("cell1").value
z.innerHTML=document.getElementById("cell2").value
}
</script>
</head>

<body onmousedown="whichElement(event)">
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<p>
Cell1:<input type="text" id= "cell1" value="cell1"/>
Cell2:<input type="text" id= "cell2" value="cell2"/>
</p>
<input type="button" onclick="insRow()" value="插入行">

</body>
</html>