首页猿问为什么我的变量表数据返回未定义？

为什么我的变量表数据返回未定义？

JavaScript

不负相思意 2024-01-18 16:27:35

我在代码中尝试执行的操作是在单击表时返回表的一行。我在 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>

查看完整描述

4 回答

慕容708150

TA贡献1831条经验获得超4个赞

您不需要在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");

}

<thead>

<tr>

<th>TimeSlot</th>

<th>Attendees</th>

<th>update</th>

<th>delete</th>

</tr>

</thead>

<tbody>

<td class="table">value 2</td>

<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>

</td>

<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>

</td>

</tr>

<td class="table">value 22</td>

<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>

</td>

<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>

</td>

</tr>

<td class="table">value 33</td>

<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>

</td>

<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>

</td>

</tr>

</tbody>

</table>

反对回复 2024-01-18

慕标5832272

TA贡献1966条经验获得超4个赞

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");

}

<thead>

<tr>

<th>TimeSlot</th>

<th>Attendees</th>

<th>update</th>

<th>delete</th>

</tr>

</thead>

<tbody>

<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>

</td>

<a onclick="onDelete(this)" style="color: #007bff; cursor: pointer"> delete</a>

</td>

</tr>

</tbody>

</table>

反对回复 2024-01-18

慕仙森

TA贡献1827条经验获得超7个赞

将引用传递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;

}

<thead>

<tr>

<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>

</a>

</a>

</td>

</tr>

</tbody>

</table>

反对回复 2024-01-18

胡说叔叔

TA贡献1804条经验获得超8个赞

您不需要该单击功能，因此您可以通过这种方式修改您的代码。

function onUpdate() {

var tableData = $("tr.table")

.children("td")

.map(function () {

return $(this).text();

})

.get();

if( tableData[7] === 2) {

console.log("if statement");

}

</script>

反对回复 2024-01-18

4 回答
0 关注
33 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

为什么我的变量表数据返回未定义？

为什么我的变量表数据返回未定义？

4 回答

添加回答