
方法一:直接在标签元素上添加
方法二:是通过js来添加
如图:
介绍:
HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
这样,你只要使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。
HTML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。
<html><head>
<title>添加行</title>
<script type="text/javascript">
function addRow() {
var tb = document.getElementById("tb")
var length = tb.rows.length//该表格的总行数
var row = tb.insertRow(length)//在行末尾添加一行
row.ondblclick = function () { altRowNum1(row)} //为行添加双击事件
var c1 = row.insertCell(0)//添加单元格
c1.innerHTML = length + 1
var c2 = row.insertCell(1)
c2.innerHTML = '<input type="text" />'
var c3 = row.insertCell(2)
c3.innerHTML = '<input type="button" onclick="altRowNum2(this)" value="当前行"/>'
}
function altRowNum1(row) {
var rowIndex = row.rowIndex//行号
alert("行双击,这是第 " + (rowIndex + 1) + " 行,行下标为 " + rowIndex)
}
function altRowNum2(btn) {
var rowIndex = btn.parentNode.parentNode.rowIndex//btn的父节点为单元格,单元格的父节点当前行
alert("单元格按钮单击,这是第 " + (rowIndex + 1) + " 行,行下标为 " + rowIndex)
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="addRow()"/><br/>
<table id="tb" width="200px" border="1px" >
<tr ondblclick="altRowNum1(this)"><td>1</td><td><input type="text" value="60"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>2</td><td><input type="text" value="67"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>3</td><td><input type="text" value="59"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>4</td><td><input type="text" value="70"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>5</td><td><input type="text" value="80"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>6</td><td><input type="text" value="90"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>7</td><td><input type="text" value="hh"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>8</td><td><input type="text" value="98"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>9</td><td><input type="text" value="99"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>10</td><td><input type="text" value="100"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
</table>
<div id="resultDiv">
</div>
</body>
</html>
单击可以使用a标签和onclick事件,具体的演示代码如下:<div onclick="window.open('https://lanye.org')">单击打开网址</div>
<a href="https://lanye.org" target="_blank">单击打开网址</a>
双击需要使用ondblclick时间,具体的演示代码如下:
<div ondblclick="window.open('https://lanye.org')">双击打开网址</div>
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)