亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

為什么我的變量表數據返回未定義？

為什么我的變量表數據返回未定義？

不負相思意 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");

  }

}

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


查看完整回答
反對 回復 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");

  }

}

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


查看完整回答
反對 回復 2024-01-18
?
慕仙森

TA貢獻1827條經驗 獲得超8個贊

將引用傳遞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>


查看完整回答
反對 回復 2024-01-18
?
胡說叔叔

TA貢獻1804條經驗 獲得超8個贊

您不需要該單擊功能，因此您可以通過這種方式修改您的代碼。


<script>

    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 關注
  • 231 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號