4

行を動的に作成しようとしましたが、javascript を使用して動的にラベル付きのチェックボックスを追加すると問題が発生します。ただし、デフォルトで Html で作成したものは正しく動作します。

実際、追加した画像 (on.png / off.png) をチェックボックスに置き換えます。HTML(チェックボックス+ラベル)でのみコードを実行するとコードは機能しますが、Javascriptで要素を作成したいだけで、ラベルを表示できますが、クリックしても機能しません。

これはすべて私のコードです:

Main.html

 <HTML>
 <HEAD>
<TITLE>  </TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
<SCRIPT language="javascript">
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.id =  "id2" ;
        cell1.appendChild(element1);

        // Create label
        var label = document.createElement("label");
        label.for =  "id2" ;
        cell1.appendChild(label);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        cell3.appendChild(element2);


    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }

        }
        }catch(e) {
            alert(e);
        }
    }

</SCRIPT>
 </HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"  id="id1" /> <label for="id1" > </label>   </TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" /> </TD>
    </TR>
  </TABLE>
</BODY>
</HTML>

スタイル.css

 input[type=checkbox] {
  display:none;
}

 input[type=checkbox] + label
 {
   background: url(images/off.png) no-repeat;
   height: 64px;
   width: 64px;
   display:inline-block;
   padding: 0 0 0 0px;
 }

  input[type=checkbox]:checked + label
 {
    background: url(images/on.png) no-repeat;
    height: 64px;
    width: 64px;
    display:inline-block;
    padding: 0 0 0 0px;
  }

お願い助けて。

4

2 に答える 2

9

これを変える

label.for =  "id2" ;

これに

label.htmlFor =  "id2" ;

一部の JavaScript 実装では、キーワード/予約語をオブジェクト プロパティとして使用できないため、forプロパティに対して回避策を講じる必要があったため、 htmlFor.

同様の状況が であった.classため、彼らは を使用しています.className

于 2012-09-25T14:50:18.020 に答える
1

あなたの問題は17行目label.for = "id2" ;です。label.htmlFor = "id2";

于 2012-09-25T14:49:50.227 に答える