CODEWITHSUNDEEP
javascriptjqueryfunctionecmascript-6arguments
nb_nb_nb
nb_nb_nb

Reputation: 1381

Using this as an argument, but the this should refer to the 'this' inside the on change inside the function

I want to change the values inside my table based on what is selected in the select box.

The tds have a data-value. I want val2 and val3 to either be divided by the data-value or leave it as is based on what I select.

This is my code:

let data1 = [
    {date:'2018-01-01', device: 'iphone',   site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'iphone',   site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'iphone',   site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-01', device: 'ipad',     site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'ipad',     site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'ipad',     site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-02', device: 'iphone',   site: 'google', val1:11, val2:22, val3:33},
    {date:'2018-01-02', device: 'iphone',   site: 'bing',   val1:25, val2:27, val3:28},
    {date:'2018-01-02', device: 'iphone',   site: 'jeeves', val1:67, val2:80, val3:15},
    {date:'2018-01-02', device: 'ipad',     site: 'google', val1:12, val2:21, val3:31},
    {date:'2018-01-02', device: 'ipad',     site: 'bing',   val1:26, val2:16, val3:11},
    {date:'2018-01-02', device: 'ipad',     site: 'jeeves', val1:65, val2:79, val3:55},
    {date:'2018-01-03', device: 'iphone',   site: 'google', val1:17, val2:19, val3:11},
    {date:'2018-01-03', device: 'iphone',   site: 'bing',   val1:13, val2:15, val3:12},
    {date:'2018-01-03', device: 'iphone',   site: 'jeeves', val1:69, val2:79, val3:15},
    {date:'2018-01-03', device: 'ipad',     site: 'google', val1:17, val2:51, val3:31},
    {date:'2018-01-03', device: 'ipad',     site: 'bing',   val1:25, val2:15, val3:17},
    {date:'2018-01-03', device: 'ipad',     site: 'jeeves', val1:61, val2:71, val3:15}
    ];

    Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
    let ths = Object.keys(data1[0]);
    let nums = ['val2', 'val3'];

    data1.forEach((d, idx) => {
        $(`#my_tds`).append(`<tr></tr>`);
        ths.forEach(th => {
            $(`#my_tds > tr:last`).append(`
                <td>
                <div class='one ${th}_id' data-value=${d['val1']}>${d[th]}</div>
                </td>
                `);
        });
    });

    const calc = (x) => {
        nums.forEach(d => {
            $(`.${d}_id`).each(function(){
                // $(this).data('value');
                let mathFunc = $(this).text() / x;
                console.log(mathFunc);
                $(this).html(mathFunc);
            });
        });
    }
//not sure how to send that value as an argument because the 'this' should be the 'this' from $(`#${d}_id`).each(function()
$('#mySelect').on('change', function() {
    if (this.value === 'divide') calc($(this).data('value'));
    else calc(1);
});
    table, td, th { border: 1px solid black; }
    #mytable { 
        width: 100%;
        border-collapse: collapse; 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='mySelect'>
    <option value="" disabled selected>Select your option</option>
    <option value='divide'>Divide</option>
    <option value='orig'>Original</option>
</select>
<br><br>
<table id='mytable'>
    <thead><tr id='my_ths'></tr></thead>
    <tbody id='my_tds'></tbody>
</table>

How do I send the $(this).data('value') as an argument? I know that the this I am referring to in my code is wrong. How do I refer to $(this).data('value') inside the td each?

Upvotes: 0

Views: 26

Answers (2)

Alexander Higgins
Alexander Higgins

Reputation: 6923

In your calc function, you can access the underlying element as function arguments of each, as per documentation.

$(`.${d}_id`).each(function(i,e){
    // i is the index, e is the element.
    console.log(e);
});

Next modify the call to calc to pass null when we want to use the cells data-value and modify the calc function to use the cells data-value attribute if the argument passed to calc is null.

Putting it all together:

let data1 = [
    {date:'2018-01-01', device: 'iphone',   site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'iphone',   site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'iphone',   site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-01', device: 'ipad',     site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'ipad',     site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'ipad',     site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-02', device: 'iphone',   site: 'google', val1:11, val2:22, val3:33},
    {date:'2018-01-02', device: 'iphone',   site: 'bing',   val1:25, val2:27, val3:28},
    {date:'2018-01-02', device: 'iphone',   site: 'jeeves', val1:67, val2:80, val3:15},
    {date:'2018-01-02', device: 'ipad',     site: 'google', val1:12, val2:21, val3:31},
    {date:'2018-01-02', device: 'ipad',     site: 'bing',   val1:26, val2:16, val3:11},
    {date:'2018-01-02', device: 'ipad',     site: 'jeeves', val1:65, val2:79, val3:55},
    {date:'2018-01-03', device: 'iphone',   site: 'google', val1:17, val2:19, val3:11},
    {date:'2018-01-03', device: 'iphone',   site: 'bing',   val1:13, val2:15, val3:12},
    {date:'2018-01-03', device: 'iphone',   site: 'jeeves', val1:69, val2:79, val3:15},
    {date:'2018-01-03', device: 'ipad',     site: 'google', val1:17, val2:51, val3:31},
    {date:'2018-01-03', device: 'ipad',     site: 'bing',   val1:25, val2:15, val3:17},
    {date:'2018-01-03', device: 'ipad',     site: 'jeeves', val1:61, val2:71, val3:15}
    ];

    Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
    let ths = Object.keys(data1[0]);
    let nums = ['val2', 'val3'];

    data1.forEach((d, idx) => {
        $(`#my_tds`).append(`<tr></tr>`);
        ths.forEach(th => {
            $(`#my_tds > tr:last`).append(`
                <td>
                <div class='one ${th}_id' data-value=${d['val1']}>${d[th]}</div>
                </td>
                `);
        });
    });

    const calc = (x) => {
        nums.forEach(d => {
            $(`.${d}_id`).each(function(i,e){
                // $(this).data('value');
                let mathFunc = $(e).text() / (x ?? $(this).data('value'));
                console.log(mathFunc);
                $(this).html(mathFunc);
            });
        });
    }
//not sure how to send that value as an argument because the 'this' should be the 'this' from $(`#${d}_id`).each(function()
$('#mySelect').on('change', function() {
    if (this.value === 'divide') calc(null);
    else calc(1);
});
 table, td, th { border: 1px solid black; }
    #mytable { 
        width: 100%;
        border-collapse: collapse; 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='mySelect'>
    <option value="" disabled selected>Select your option</option>
    <option value='divide'>Divide</option>
    <option value='orig'>Original</option>
</select>
<br><br>
<table id='mytable'>
    <thead><tr id='my_ths'></tr></thead>
    <tbody id='my_tds'></tbody>
</table>

Upvotes: 0

Kinglish
Kinglish

Reputation: 23664

Probably went overboard, but I edited your function to calculate the data-value division (if 'division' was selected), then reverse it if you subsequently seleected 'original'. 'Original' still divides by 1 if you don't select division first, but after 'division' has been selected, if you select 'original' it will revert. To make this part easy, I added a data-orig attribute to your td setup. Like i said, overboard...

let data1 = [{
    date: '2018-01-01',
    device: 'iphone',
    site: 'google',
    val1: 10,
    val2: 20,
    val3: 30
  },
  {
    date: '2018-01-01',
    device: 'iphone',
    site: 'bing',
    val1: 23,
    val2: 12,
    val3: 14
  },
  {
    date: '2018-01-01',
    device: 'iphone',
    site: 'jeeves',
    val1: 67,
    val2: 78,
    val3: 12
  },
  {
    date: '2018-01-01',
    device: 'ipad',
    site: 'google',
    val1: 10,
    val2: 20,
    val3: 30
  },
  {
    date: '2018-01-01',
    device: 'ipad',
    site: 'bing',
    val1: 23,
    val2: 12,
    val3: 14
  },
  {
    date: '2018-01-01',
    device: 'ipad',
    site: 'jeeves',
    val1: 67,
    val2: 78,
    val3: 12
  },
  {
    date: '2018-01-02',
    device: 'iphone',
    site: 'google',
    val1: 11,
    val2: 22,
    val3: 33
  },
  {
    date: '2018-01-02',
    device: 'iphone',
    site: 'bing',
    val1: 25,
    val2: 27,
    val3: 28
  },
  {
    date: '2018-01-02',
    device: 'iphone',
    site: 'jeeves',
    val1: 67,
    val2: 80,
    val3: 15
  },
  {
    date: '2018-01-02',
    device: 'ipad',
    site: 'google',
    val1: 12,
    val2: 21,
    val3: 31
  },
  {
    date: '2018-01-02',
    device: 'ipad',
    site: 'bing',
    val1: 26,
    val2: 16,
    val3: 11
  },
  {
    date: '2018-01-02',
    device: 'ipad',
    site: 'jeeves',
    val1: 65,
    val2: 79,
    val3: 55
  },
  {
    date: '2018-01-03',
    device: 'iphone',
    site: 'google',
    val1: 17,
    val2: 19,
    val3: 11
  },
  {
    date: '2018-01-03',
    device: 'iphone',
    site: 'bing',
    val1: 13,
    val2: 15,
    val3: 12
  },
  {
    date: '2018-01-03',
    device: 'iphone',
    site: 'jeeves',
    val1: 69,
    val2: 79,
    val3: 15
  },
  {
    date: '2018-01-03',
    device: 'ipad',
    site: 'google',
    val1: 17,
    val2: 51,
    val3: 31
  },
  {
    date: '2018-01-03',
    device: 'ipad',
    site: 'bing',
    val1: 25,
    val2: 15,
    val3: 17
  },
  {
    date: '2018-01-03',
    device: 'ipad',
    site: 'jeeves',
    val1: 61,
    val2: 71,
    val3: 15
  }
];

Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
let ths = Object.keys(data1[0]);
let nums = ['val2', 'val3'];

data1.forEach((d, idx) => {
  $(`#my_tds`).append(`<tr></tr>`);
  ths.forEach(th => {
    $(`#my_tds > tr:last`).append(`
                <td>
                <div class='one ${th}_id' data-value='${d['val1']}'  data-orig='${d[th]}'>${d[th]}</div>
                </td>
                `);
  });
});

const calc = (x) => {
  nums.forEach(d => {
    $(`.${d}_id`).each(function() {
      let mathFunc
      if (x === 1 && $(this).attr('data-processed') === 'true') {
        mathFunc = $(this).attr('data-orig');
      } else {
        let denominator = x === 1 ? 1 : Number($(this).data('value'));
        mathFunc = Number($(this).text()) / denominator;
      }

      $(this).attr('data-processed', (x === 1 ? 'false' : 'true'));
      // console.log(mathFunc);
      $(this).html(mathFunc);
    });
  });
}
//not sure how to send that value as an argument because the 'this' should be the 'this' from $(`#${d}_id`).each(function()
$('#mySelect').on('change', function() {
  console.log($(this).val(), this.value)
  if (this.value === 'divide') calc(0);
  else calc(1);
});
table,
td,
th {
  border: 1px solid black;
}

#mytable {
  width: 100%;
  border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='mySelect'>
  <option value="" disabled selected>Select your option</option>
  <option value='divide'>Divide</option>
  <option value='orig'>Original</option>
</select>
<br><br>
<table id='mytable'>
  <thead>
    <tr id='my_ths'></tr>
  </thead>
  <tbody id='my_tds'></tbody>
</table>

Upvotes: 1

Related Questions