CODEWITHSUNDEEP
javascriptjquery
John
John

Reputation: 127

Why is my variable tabledata returning undefined?

What I am trying to do in my code is to return a row of my table when it is clicked. I am doing this in the jquery function $("tr.table").click(function)..... After that I am trying to store the data of this table row in a variable named tableData. This all works fine but when i try to use the variable tabledata in an if statement. I get an tabledata is undefined error. My question is how can I use the variable tabledata in my if statement without getting an error.

my javascript code

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 () {

                }
            }
        });
    }
}

my html table code

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

Upvotes: 0

Views: 856

Answers (4)

laurisstepanovs
laurisstepanovs

Reputation: 536

You do not need that click function so you can modify your code in this way.

<script>
    function onUpdate() {

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

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

Upvotes: 0

oguzhancerit
oguzhancerit

Reputation: 1572

this referes to the object the onclick method belongs to. I changed your HTML code with onclick="onUpdate(this)", now you can fecth the texts of the row with map() function.

Also you need to change your selector to select <td> of the clicked <tr> so I used [parent().parent()][1] method to reach that. You can use alternative selectors like [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>

Upvotes: 1

Pirate
Pirate

Reputation: 1175

You don't need to assign click event within onUpdate function. If I understood right, you want to click on update button and execute if..else block. You can pass a reference of a element like onclick="onUpdate(this)" in HTML. Then use .closest() to find the tr and get entire row as an array. One thing to keep in mide here is in if using === for comparison may not work as array will contain string value even for numbers. So either do type conversion or just use == to compare only values as done here.

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>

Upvotes: 1

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48610

Pass the this reference to the in-line function:

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

Then use the anchor reference i.e. ref in the handler to get the row:

function onUpdate(ref) {
  const $row = $(ref).closest('tr');
}

Full example

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>

Upvotes: 1

Related Questions