Question

我正在使用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>

浏览器默认操作-Javascript

0 个答案: