Question

如果我单击3次html表同一行意味着..我想禁用/隐藏该行..点击计数仅在页面重新加载时重置..仅使用纯javascript

我的代码：

                                                               window.onload=function found(row) {
            var table=document.getElementById("main");
            var rows = table.rows;
            for (var i = 0; i < rows.length; i++) {
                 rows[i].onclick = (function() { // closure
                    var cnt = i; // save the counter to use in the function
                         return function() {
                           var result = this.cells[i];
                           alert("You want to choose "+result.innerHTML);
                         }
                   })(i);
               }
           }

<html>
<head>
    <title>Untitled</title>
  <body>

<table id="main"><tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr><tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
</tr><tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr></table>

</body>
</html>

Answer 1

您可以保留在每个onclick处理程序上创建的闭包中剩余的计数数。然后，当此计数达到0时，隐藏该行。像这样：

var numberOfClicks = 3;
var table=document.getElementById("main");
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
    rows[i].onclick = (function(cnt) { // closure
        return function() {
            if (--cnt == 0) {
                this.style.display = 'none';
            }
        }
    })(numberOfClicks);
}

请参阅demo

Answer 2

window.onload=function found(row) {
    var table=document.getElementById("main");
    var rows = table.rows;
    for (var i = 0; i < rows.length; i++) {
        rows[i].cnt = 0;
        rows[i].onclick = (function() {
            this.cnt ++;
            alert (this.cnt);
            if (this.cnt == 3){
                this.style.display = 'none';
            }           
        });
    }
}

希望它有所帮助。

丹

如何禁用html表行

2 个答案: