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

Question

我想在我的代码中做的是在单击时返回我的表的一行。 我在 jquery function $("tr.table").click(function)....中这样做。 之后，我试图将此表行的数据存储在名为 tableData 的变量中。 这一切都很好，但是当我尝试在 if 语句中使用变量 tabledata 时。 我收到tabledata is undefined错误。 我的问题是如何在 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>
                <td class="table command">
                    <a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>
                </td>
            </tr>
        </tbody>
</table>

Answer 1

this指的是object属于onclick方法。 我用onclick="onUpdate(this)"更改了你的 HTML 代码，现在你可以用map() function 来提取行的文本。

您还需要将选择器更改为点击的<tr>的 select <td>所以我使用[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>

Answer 2

您不需要在onUpdate function 内分配点击事件。如果我理解正确，您想要点击更新按钮并执行if..else块。 您可以传递元素的引用，例如 HTML 中a 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>

Answer 3

将this引用传递给内联 function：

<a onclick="onUpdate(this)" />

然后在处理程序中使用锚引用即ref来获取行：

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>

Answer 4

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

<script>
    function onUpdate() {

      var tableData = $("tr.table")
        .children("td")
        .map(function () {
          return $(this).text();
        })
        .get();

      if( tableData[7] === 2) {
         console.log("if statement");
      }
    }
  </script>