0

以下のコードは、ユーザーが addmore リンクをクリックすると要素を追加します。

ユーザーが削除リンクをクリックすると、問題が発生します。

私は自分のコードにこれらのようなものを持っています

<script language="JavaScript">
var count=1;
function addmore() {
    alert(count);
    var printme = "<table id='table"+count+"'><tr><td><a href='#' onclick='remove(count)'>remove</a></td></tr></table";
    //(other code here)...
    count++;
}

function remove(y) {
    alert(y)
    var tab = 'table'+y;    
    document.getElementById(tab).style.display =  "none";
}
</script>

ここでアラートを使用したので、アラートが提供する count の値を簡単に監視できます。

ここで何が起こるかというと、(remove 関数の) 'y' の値は常に同じで、これはループ内の count の最後の値です。

たとえば、リンク addmore を 3 回クリックすると、「count=4」の最後の値になります。そして、この時点で削除リンクをクリックしたときに、この remove(3) のような引数を渡す必要がある 3 番目の要素を削除したいとします。しかし、ここで何が起こるかは、私がクリックした要素であり、常にこの方法で引数を渡しているようです remove(4)

4

4 に答える 4

2

これはcount、グローバル変数として持っているためです。

.....onclick='remove("+count+")'....値を「固定」してみてください。

于 2012-12-06T04:27:47.223 に答える
1

以前の回答はすべて正しいです。 onclick は、remove が呼び出されたときに現在の変数カウントを参照します。

テーブルのテキストを生成するときは、count の値をそのまま使用します。

onclick='remove('+count+')...

これを使用して、IDとカウントを完全に除外できます。

onclick='remove(this.parentElement.parentElement.parentElement);'...

function remove(elementToRemove){
    elementToRemove.parentElement.removeChild(elementToRemove);
}
于 2012-12-06T04:48:06.470 に答える
1

これを試してください：

var printme = "<table id='table"+count+"'><tr><td><a href='#' onclick='remove("+count+")'>remove</a></td></tr></table";

次の行削除機能も試してください。

document.getElementById(""+tab+"").style.display =  "none";
于 2012-12-06T04:28:59.350 に答える
1

多分ただ onclick='remove('+count+')'

次のようなことができます

<html>
<head>
<script type="text/javascript">
var count=1;
function addmore() {
    var id = 'table' + count;
    var table = document.createElement('table');
    table.setAttribute('id', id);
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.appendChild(document.createTextNode('remove ' + id));
    a.onclick = function() {
        table.style.display = 'none';
        document.body.removeChild(table);
    };
    td.appendChild(a);
    tr.appendChild(td);
    table.appendChild(tr);
    document.body.appendChild(table);
    count++;
}
</script>
</head>
<body>
<a href="#" onclick="addmore()">Add Table</a>
</body>
</html>

このように定義されたテーブル参照と onclick では、id は必要ありません

于 2012-12-06T04:29:26.603 に答える