我正在使用javascript中的表格进行工作,我想在其中添加一些链接,我在Javascript中使用了以下示例:
Show/Hide Table Rows using Javascript classes
除非将A href放在表中,否则它不会像我期望的那样工作。我认为或知道与默认浏览器操作设置有关:https://javascript.info/default-browser-action
我通过添加以下内容使其起作用:
<html>
<head>
<title>Onclick</title>
<script type="text/javascript">
function handleclick() {
document.write("Clicked");
return false;
}
</script>
</head>
<body>
<p><a id="link1" href="#">Click Here</a></p>
<script type = "text/javascript" >
var link1 = document.getElementById("link1");
if (typeof window.addEventListener != "undefined") {
link1.addEventListener("click",handleclick,false);
} else {
link1.attachEvent("onclick",handleclick);
}
</script>
</body>
</html>
除了我不希望每个链接都具有一个名称(link1,link2等),而且它不适用于I帧的target =“ content”。
有人对此有解决方案吗?因为没有隐藏/显示选项,它可以完美工作,除非那不是我想要的。
提前谢谢
注意:我对javascript不太有经验,只是学习。
更新:完整的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
tbody tr {
display : none;
}
tr.parent {
display : table-row;
}
tr.open {
display : table-row;
}
</style>
<script>
function handleclick() {
alert('It was clicked');
document.write("Clicked");
return false;
}
</script>
</head>
<body>
<table id="products">
<tbody>
<tr class="parent">
<td><a href="#">Toggle table</a></td>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class="parent">
<td><a href="#">Open table</a></td>
</tr>
<tr>
<td></td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td></td>
<td>10</td>
<td>11</td>
<td><a id="link1" href="https://nl.wikipedia.org/wiki/JavaScript" target="content">(12)Link</a></td>
</tr>
</tbody>
</table>
<tr>
<td>Link outside table</td>
<td><a href="https://nl.wikipedia.org/wiki/JavaScript" target="content">(12) Link</a></td>
<td style="background-color: white" ><div id="content"><iframe height="1000" align="middle" style="border:none" width="100%" name="content" src="https://javascript.info/default-browser-action"></iframe> </td>
</tr>
<script>
document.getElementById("products").addEventListener("click", function(e) {
if (e.target.tagName === "A") {
e.preventDefault();
var row = e.target.parentNode.parentNode;
while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
toggle_it(row);
}
});
function nextTr(row) {
while ((row = row.nextSibling) && row.nodeType != 1);
return row;
}
function toggle_it(item){
if (/\bopen\b/.test(item.className))
item.className = item.className.replace(/\bopen\b/," ");
else
item.className += " open";
}
var link1 = document.getElementById("link1");
if (typeof window.addEventListener != "undefined") {
link1.addEventListener("click",handleclick,false);
} else {
link1.attachEvent("onclick",handleclick);
}
</script>
</body>
</html>