JavaScript变量为空

如何解决JavaScript变量为空

我有一个xml文件，正在用作我的网站的数据库。我有一个表格，其中包含网站的所有产品。当您将产品添加到xml时，它会自动更新该表（参见图片）。

现在，我也希望能够通过单击删除按钮从此处删除产品。我想通过使用Javascript抓取产品名称并将该名称发送回php来处理xml来删除该产品。

这是问题所在：当我尝试从表中获取产品名称时，在执行console.log时字符串为空。我该如何解决？

以下是一些相关代码：

这是Javascript的一部分，我在其中读取xml文件，以将xml中的产品信息附加到网站上：

                //name
                td = document.createElement('td');
                td.innerHTML = productNode.children[0].innerHTML;
                row.appendChild(td);

                //price
                td = document.createElement('td');
                let price = productNode.children[4].innerHTML;
                let priceArray = price.split(',');
                let priceList = makeUL(priceArray);
                td.appendChild(priceList);
                row.appendChild(td);

                //type 
                td = document.createElement('td');
                let type = productNode.children[6].innerHTML;
                let typeArray = type.split(',');
                let typeList = makeUL(typeArray);
                td.appendChild(typeList);
                row.appendChild(td);

                console.log("running..........")


                //size
                td = document.createElement('td');
                let size = productNode.children[5].innerHTML;
                let sizeArray = size.split(',');
                let sizeList = makeUL(sizeArray);
                td.appendChild(sizeList);
                row.appendChild(td);

                //quantity
                td = document.createElement('td');
                td.innerHTML = productNode.children[2].innerHTML;
                row.appendChild(td);

                //stock
                td = document.createElement('td');
                td.innerHTML = productNode.children[3].innerHTML;
                row.appendChild(td);


                //buttons to remove and edit (not pulled from database)
                td = document.createElement('td');
                td.innerHTML = "<a href='edit_product.html' class='btn btn-outline-dark'>Edit</a>  <a href='#myModal' name='delete' onclick=deleteProduct() class='btn btn-outline-danger' >Remove</a>"
                row.appendChild(td);
            
                productTable.children[1].appendChild(row); 

这是用于向服务器发送信息的Javascript：

 function deleteProduct() {
    let productName = $(this).closest('tr').find('td:nth-child(1)').text();
    console.log(productName);
    $.post("deleteProduct.php",{prodName : productName});
} 

在此部分中，当我执行console.log（productName）时，它不打印任何内容，因此服务器无法处理它。

解决方法

解决此问题的快速而肮脏的方法是在方法调用中传递元素。

onclick="deleteProduct(this)"

然后您的方法将接受其中的链接作为参数并使用它。

function deleteProduct(link) {
    let productName = $(link).closest('tr').find('td:nth-child(1)').text();
    console.log(productName);
    $.post("deleteProduct.php",{prodName : productName});
} 

但是， preferred 的方法将是在具有上下文的元素上创建实际的事件处理程序，或者在所有元素的共享父级上使委托事件处理程序更高将执行逻辑。

jQuery Direct绑定：https://learn.jquery.com/events/event-basics/

jQuery委托事件绑定：https://learn.jquery.com/events/event-delegation/