如何在復選框數組上使用JavaScript事件（onclick）創建元素（div）？

Question

我正在創建一個應用程序，該應用程序從下拉列表中選擇一個值即可使用ajax顯示數據庫中的數據。 我想在單擊復選框時為每個數據庫記錄創建一個html div元素。 它對於1條記錄工作正常，但是當我使用數組對多條記錄進行操作時卻失敗。

這是我的代碼。 我正在使用一個名為items的函數，該函數在復選框的click事件中觸發：

function items() {
    var checkdetail = document.getElementsByName('values[]');
    for (var check in checkdetail) {
        if (checkdetail[check].checked == true) {
            var para = document.createElement("div");
            para.id = "head[]";
            para.style.width = "100%";
            para.style.height = "100px";
            para.style.border = "1px solid";

            var t = document.getElementById("table"), // This have to be the ID of your table, not the tag
                d = t.getElementsByTagName("tr")[2],
                element = d.getElementsByTagName("td")[0];
            element.appendChild(para);
        }

        if (checkdetail[check].checked == false) {
            var parent = document.getElementById("here");
            var child = document.getElementById("head[]");
            parent.removeChild(child);
        }
    }
}

提前致謝 ..........

Answer 1

您要為每個div創建新行還是將所有div放在同一行的一邊。

您正在為所有div的ID分配相同的字符串。 ID為“ head []”，並將其添加到每個div中-您未分配數組或數組中的ID，而是使它們都具有相同的字符串值。

如果要將它們放在相同的TR中，則可以將此代碼移出循環。

var t = document.getElementById("table"),
d = t.getElementsByTagName("tr")[2],
element = d.getElementsByTagName("td")[0];

然后您可以將“ Head []” ID放在TD上，以便以后知道要刪除哪個單元格。

如果您實際上想為每個DIV分隔新的行和單元格，則需要在插入DIV之前將新的TR / TD節點插入表中，並為DIV或TD提供唯一的ID。

順便說一句，如果它確實是一個段落或文本，則使用

就現有CSS的樣式而言，元素可能是一個更好的選擇，而不是通過代碼在DIV上強制樣式。