在javascript中创建表时，node元素函数如何不自动运行？
我正在基于javascript数组创建一系列表，遇到了一个主要问题 这是我的实现步骤，我点击“show top gundam”按钮，使用“createTable”函数创建表格。然后我将点击“删除”按钮删除我不喜欢的表格 问题是，当我按下“显示顶部gundam”按钮创建表格时，它完全自动启动了“删除”按钮的函数名“删除IV”。我的想法是，每次按下remove按钮时，都会根据每个div的参数“id”来删除它 有没有办法让它不自动运行，只在我单击“删除”按钮时运行在javascript中创建表时，node元素函数如何不自动运行？,javascript,xml,servlets,Javascript,Xml,Servlets,我正在基于javascript数组创建一系列表，遇到了一个主要问题 这是我的实现步骤，我点击“show top gundam”按钮，使用“createTable”函数创建表格。然后我将点击“删除”按钮删除我不喜欢的表格 问题是，当我按下“显示顶部gundam”按钮创建表格时，它完全自动启动了“删除”按钮的函数名“删除IV”。我的想法是，每次按下remove按钮时，都会根据每个div的参数“id”来删除它 有没有办法让它不自动运行，只在我单击“删除”按钮时运行 <body onload=
<body onload="convertXmlToJavaScriptObject()">
<div style="margin-left: 10px;margin-top: 20px">
<form action="DispatcherController">
<input name="btAction" value="Crawl data" type="submit" class="btn-dark" id="crawl" onclick="showLoader()" />
<input name="btAction" value="Clear all record" type="submit" class="btn-dark" onclick="setZero()" />
<input name="btAction" value="Show Top Gundam" class="btn-dark" onclick="creatTable()"/>
<div class="loader" style="margin-top: 10px;display: none" id="loader"></div>
</form>
<button class="btn-dark" onclick="">Create table</button>
<!--Nếu như xóa thành công thì hiện chữ-->
<c:if test="${requestScope.DELETE>0 or requestScope.DELETE==0}">
<font style="color: blue" id="del"><p><h5>Xóa thành công</h5></p></font>
</c:if>
<!--<input type="submit" value="Click me" class="btn-dark" id="crawl" onclick="showLoader()"/>-->
<c:set var="gundam" value="${requestScope.FULLLIST}" />
<!--Mới mở trang lên thì nó sẽ show có tổng cộng có bao nhiêu record-->
<!--Đây là số record sau khi crawl xong-->
<c:set var="crawlrecord" value="${requestScope.COUNT}"/>
<!--Đây là số rerord còn ở trong DB-->
<c:set var="couting" value="${applicationScope['COUNTRECORD']}"/>
<div style="margin-top: 20px">
Tổng số record cào về <p id="record" style="font-weight: bold">${crawlrecord}</p>
</div>
<div><p style="text-align: center">----------------Gundam-------------------</p></div>
<c:forEach items="${applicationScope.TESTTOP}" var="item">
<!-- <div style="width: 600px">
<table style="margin-bottom: 10px;width: 100%">
<tr>
<th style="width: 30%"><img src="${item.avatar}" width="150px"></th>
<th style="width: 70%">
<p>${item.name}<br/>${item.price}<br/>${item.type}</p>
<p><button>Add</button><button style="margin-left: 10px">Remove</button></p>
</th>
</tr>
</table>
</div>-->
</c:forEach>
<script>
var array = [];//Tạo 1 array để lưu những gundam object đc chuyển từ hàm convertXmlToJavaScriptObject, thuận tiện cho việc thêm, xóa, sửa
// Hàm này có tổng cộng chức năng như sau
// 1 là nó sẽ show cái loader khi đang crawl
// 2 là nó sẽ tắt cái chữ delete
// 3 là nó show số record sau khi crawl xong
function showLoader() {
var deleted = document.getElementById("del");
var x = document.getElementById('loader');
//Nếu như có danh sách rồi thì tắt cái loader và xóa đi cái chữ "xóa thành công rồi nếu nó có đang hiện"
//khi nhấn vào nút crawl thì cái loader sẽ hiện
if (x.style.display === "none") {
x.style.display = "block";
<c:set var="couting" value="${requestScope.COUNT}"/>
document.getElementById("record").innerHTML = "${couting}";
}
}
;
//Xóa hết record thì hiện là zero
function setZero() {
document.getElementById("record").innerHTML = "0";
var show = document.getElementById("del");
if (show.style.display === "none") {
show.style.display = "block";
}
}
/*
* Hàm này dùng để convert xml thành javascript object
* Đã thành công
* @returns {undefined} */
function convertXmlToJavaScriptObject() {
//Chuyển String thành DOM
var xmlString = '${applicationScope.TOP}';
var xmlDOc;
var paser = new DOMParser();
var xml = paser.parseFromString(xmlString, "text/xml");
var path = "/items/item";
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();//Duyệt từng node đã có đc từ xpath
while (result) {
var item = {
id: "",
name: "",
price: "",
avatar: "",
link: "",
type: "",
firstDateAppearance: "",
numberOfTimeClicked: ""
};
item.name = result.getElementsByTagName("name")[0].childNodes[0].nodeValue;//Vì bây h current node là item nên chỉ có duy nhất 1 name node, ta viết thế này sẽ dễ lấy
item.id = result.getElementsByTagName("id")[0].childNodes[0].nodeValue;
item.price = result.getElementsByTagName("price")[0].childNodes[0].nodeValue;
item.avatar = result.getElementsByTagName("avatar")[0].childNodes[0].nodeValue;
item.link = result.getElementsByTagName("link")[0].childNodes[0].nodeValue;
item.firstDateAppearance = result.getElementsByTagName("firstDateAppearance")[0].childNodes[0].nodeValue;
console.log(item.firstDateAppearance);
item.numberOfTimeClicked = result.getElementsByTagName("numberOfTimeClicked")[0].childNodes[0].nodeValue;
array.push(item);
//Đi tới node tiếp theo sau khi duyệt ở node hiện tại
//Giống như thầy Khánh nói, khi duyệt node thì luôn phải bắt đầu ở ndoe mới
result = nodes.iterateNext();
}
console.log(array.length);
for (i = 0; i < array.length; i++) {
console.log(array[i].name);
}
}
/**
* functin này sẽ tạo ra 1 cái table
*/
function creatTable() {
for (i = 0; i < array.length; i++) {
//tạo 1 object chứa function
var body = document.getElementsByTagName('body')[0];
var div = document.createElement('div');
div.setAttribute('id', array[i].id);
div.style.width = "600px";
//tạo cái table
var table = document.createElement('table');
table.style.marginBottom = "10px";
table.style.width = "100%";
var tr = document.createElement('tr');
var firstTh = document.createElement("th");
firstTh.style.width = "30%";
var img = document.createElement('img');
img.setAttribute('width', '150px');
img.setAttribute('src', array[i].avatar);
firstTh.appendChild(img);
//Cái th thứ 2
var secontTh = document.createElement('th');
secontTh.style.width = "70%";
var pFirst = document.createElement('p');
pFirst.appendChild(document.createTextNode(array[i].name));//Lấy name
var br = document.createElement('br');
pFirst.appendChild(br);
pFirst.appendChild(document.createTextNode(array[i].price));//lấy giá
var br = document.createElement('br');
pFirst.appendChild(br);
pFirst.appendChild(document.createTextNode(array[i].type));//lấy type
//node p thứ 2
var pSecond = document.createElement('p');
var add = document.createElement('button');
add.setAttribute('class', 'btn-success');
add.innerHTML = "Add";
var remove = document.createElement('button');
remove.innerHTML = "Remove";
remove.setAttribute('class', 'btn-danger');
var idNode = array[i].id;
remove.onclick = function () {
removeDiv(idNode)
};
remove.style.marginLeft = "10px";
//tạo ra node id
var infoId = document.createElement("idnode");
infoId.appendChild(document.createTextNode(array[i].id));
infoId.style.display = "none";
pSecond.appendChild(add);
pSecond.appendChild(remove);
//add 2 cái p vào cái th thứ 2
secontTh.appendChild(pFirst);
secontTh.appendChild(pSecond);
tr.appendChild(firstTh);
tr.appendChild(secontTh);
table.appendChild(tr);
div.appendChild(table);
div.appendChild(infoId);
body.appendChild(div);
}
}
function tableCreate() {
var body = document.getElementsByTagName('body')[0];
var tbl = document.createElement('table');
tbl.style.width = '100%';
tbl.setAttribute('border', '1');
var tbdy = document.createElement('tbody');
for (var i = 0; i < 3; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 2; j++) {
if (i == 2 && j == 1) {
break
} else {
var td = document.createElement('td');
td.appendChild(document.createTextNode('\u0020'))
i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
/**
* Hàm này dùng để test gửi xmlHttpRequest về để nhận data mà ko cần load trang
* Đã thành công
* @returns {undefined}
*/
function testing() {
var xmlHttp = new XMLHttpRequest();
var url = "GetTheTopIDServlet?name=sam";
var xmlDom;
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
xmlDom = xmlHttp.responseXML;//responseXML là dữ liệu thuộc kiểu XML
if (xmlDom != null) {
var x = xmlDom.getElementsByTagName("name");
console.log(x.length)
for (var i = 0; i < x.length; i++) {
console.log("Day la value= " + x[i].childNodes[0].nodeValue);
}
} else {
console.log("null bỏ mẹ rùi");
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);//Bắt đầu gửi request đi
}
</script>
<script>
/**
* Hàm này sẽ remove table mà ta chọn dựa trên id
* @param {type} id
* @returns {undefined}
*/
function removeDiv() {
console.log("hehe");
}
</script>
我能够单独捕获事件，但一个新问题是，它总是选择从对象数组生成的最后一个id，而不是获取每个表的正确id。
remove.onclickremoveDivremoveDivremove.onclick=removeDiv
removeDivremove.onclick=function（）{
removeDiv（idNode）
}
//或者使用ES6箭头函数语法
remove.onclick=（）=>removeDiv（idNode）；
试试看 你的解决方案是正确的。但当我添加更多类似于“removeDiv（idNode）”的参数时。它再次自动运行。我该怎么办？你可以把它包装成一个匿名函数。关键是不要在单击时执行您的设置。它再次起作用，但我有新的错误。给定的id始终是最后一个“div”的最后一个id。下面是您指示时我重写的代码：var idNode=array[I].id；remove.onclick=function（）{removeDiv（idNode）}；嗯，你能把你问题中的代码更新成更新后的代码吗？这样我就可以在完整的上下文中看到它了？
var idNode = array[i].id;
remove.onclick = function () {
removeDiv(idNode)
};