为什么我的变量表数据返回未定义？
我在代码中尝试执行的操作是在单击表时返回表的一行。我在 jquery 函数中执行此操作$("tr.table").click(function)....。之后，我尝试将此表行的数据存储在名为 tableData 的变量中。这一切都工作正常，但是当我尝试在 if 语句中使用变量 tabledata 时。我收到一个表数据未定义的错误。我的问题是如何在 if 语句中使用变量 tabledata 而不会出现错误。
我的 JavaScript 代码
function onUpdate() {
var tableData
var auth2 = gapi.auth2.getAuthInstance();
var profile = auth2.currentUser.get().getBasicProfile();
$("tr.table").click(function () {
tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
});
if( tableData[7] === 2) {
console.log("if statement");
...
}
else {
console.log("else statement");
$.confirm({
title: '',
content: '',
buttons: {
confirm: function () {
}
}
});
}
}
我的html表格代码
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>TimeSlot</th>
<th>Room</th>
<th>Attendees</th>
<th>update</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table command">
<a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
</td>
不负相思意浏览 143回答 4
4回答
-
慕容708150
您不需要在onUpdate函数内分配点击事件。如果我理解正确，您想要单击更新按钮并执行if..else块。a您可以像 HTML 一样传递元素的引用onclick="onUpdate(this)"。然后使用.closest()查找tr并将整行作为数组获取。这里要保留的一件事是，if用于===比较可能不起作用，因为数组甚至对于数字也将包含字符串值。因此，要么进行类型转换，要么仅用于==比较此处所做的值。function onUpdate($this) { var tableData; tableData = $($this).closest('tr').children("td").map(function() { return $(this).text(); }).get(); //console.log(tableData); if (tableData[7] == 2) { console.log("if statement 2"); } else if (tableData[7] == 22) { console.log("if statement 22"); } else { console.log("else statement"); }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><table class="table table-bordered table-responsive-sm table-hover"> <thead> <tr> <th>Date</th> <th>TimeSlot</th> <th>Room</th> <th>Attendees</th> <th>update</th> <th>delete</th> </tr> </thead> <tbody> <tr class="table"> <td class="table">...</td> <td class="table">...</td> <td class="table">...</td> <td class="table">value 2</td> <td class="table" style="display: none">...</td> <td class="table" style="display: none">1</td> <td class="table" style="display: none">3</td> <td class="table" style="display: none">2</td> <td class="table command"> <a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a> </td> <td class="table command"> <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a> </td> </tr> <tr class="table"> <td class="table">...</td> <td class="table">...</td> <td class="table">...</td> <td class="table">value 22</td> <td class="table" style="display: none">...</td> <td class="table" style="display: none">1</td> <td class="table" style="display: none">3</td> <td class="table" style="display: none">22</td> <td class="table command"> <a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a> </td> <td class="table command"> <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a> </td> </tr> <tr class="table"> <td class="table">...</td> <td class="table">...</td> <td class="table">...</td> <td class="table">value 33</td> <td class="table" style="display: none">...</td> <td class="table" style="display: none">1</td> <td class="table" style="display: none">3</td> <td class="table" style="display: none">33</td> <td class="table command"> <a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a> </td> <td class="table command"> <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a> </td> </tr> </tbody></table> -
慕标5832272
thisonclick指的是该方法所属的对象。我用 更改了您的 HTML 代码onclick="onUpdate(this)"，现在您可以使用函数影响该行的文本map()。此外，您还需要更改选择器以选择<td>单击的内容<tr>，因此我使用了[parent().parent()][1]方法来实现这一点。您可以使用替代选择器，例如[closest()][1]var tableData;function onUpdate(e) { tableData = $(e).parent().parent().children("td").map(function () { return $(this).text(); }).get(); console.log("Table data has created as; "+tableData); if( tableData[7] === 2) { console.log("if statement"); }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="table table-bordered table-responsive-sm table-hover"> <thead> <tr> <th>Date</th> <th>TimeSlot</th> <th>Room</th> <th>Attendees</th> <th>update</th> <th>delete</th> </tr> </thead> <tbody> <tr class="table"> <td class="table">...</td> <td class="table">...</td> <td class="table">...</td> <td class="table">...</td> <td class="table" style="display: none">...</td> <td class="table" style="display: none">...</td> <td class="table" style="display: none">...</td> <td class="table" style="display: none">...</td> <td class="table command"> <a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a> </td> <td class="table command"> <a onclick="onDelete(this)" style="color: #007bff; cursor: pointer"> delete</a> </td> </tr> </tbody></table> -
慕仙森
将引用传递this给内联函数：<a onclick="onUpdate(this)" />然后在处理程序中使用锚引用 ieref来获取行：function onUpdate(ref) { const $row = $(ref).closest('tr');}完整示例function onUpdate(ref) { const $row = $(ref).closest('tr'), rowData = $row.find('td:not(.actions)').map(function(td) { return $(this).text(); }).get(); console.log(`Row data: ${JSON.stringify(rowData)}`); if (rowData[0] === '2020-12-23') { console.log('Hello World!'); }}function onDelete(ref) { $(ref).closest('tr').remove();}thead tr th { text-align: center;}.actions { display: grid; grid-auto-flow: column; column-gap: 1em; justify-content: center; align-content: space-evenly;}.hidden { display: none;}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><table class="table table-bordered table-responsive-sm table-hover"> <thead> <tr> <th>Date</th> <th>Time Slot</th> <th>Room</th> <th>Attendees</th> <th class="hidden">Hidden #1</th> <th class="hidden">Hidden #2</th> <th class="hidden">Hidden #3</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>2020-12-23</td> <td>12:00</td> <td>42</td> <td>8</td> <td class="hidden">...</td> <td class="hidden">...</td> <td class="hidden">...</td> <td class="actions"> <a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> <i class="fas fa-pencil-alt" aria-hidden="true"></i> </a> <a onclick="onDelete(this)" style="color: #007bff; cursor: pointer"> <i class="fas fa-trash" aria-hidden="true"></i> </a> </td> </tr> </tbody></table> -
胡说叔叔
您不需要该单击功能，因此您可以通过这种方式修改您的代码。<script> function onUpdate() { var tableData = $("tr.table") .children("td") .map(function () { return $(this).text(); }) .get(); if( tableData[7] === 2) { console.log("if statement"); } } </script>
随时随地看视频慕课网APP
相关分类
JavaScript