CODEWITHSUNDEEP
javascripthtmlarrays
Mokhtar Ghaleb
Mokhtar Ghaleb

Reputation: 463

how to get content of html table cell using javascript javascript depending on checkbox

I have an array of checkboxes in html with some data in table as following 

<table border=1 id='products'>
  <tr><td>item id</td><td>item Name</td><td>item Price</td></tr>

  <tr><td><input type='checkbox' id='p[]' name='prices[]'  onClick='getPrice()'></td><td>Rice</td><td>300</td></tr>
  <tr><td><input type='checkbox' id='p[]' name='prices[]'  onClick='getPrice()'></td><td>Sugar</td><td>200</td></tr>
  <tr><td><input type='checkbox' id='p[]' name='prices[]'  onClick='getPrice()'></td><td>Tea</td><td>100</td></tr>
  </table>

how I can get the content of third cell in the same row of table for checked checkbox? I create a function in javascript getPrice() but i don't know what i should to write in if statment

<script>

   function getPrice()
  {
     if (document.getElementById('p[]').checked) 
      {

      } else {

      }
 }
</script>

Upvotes: 0

Views: 143

Answers (5)

am05mhz
am05mhz

Reputation: 2875

since this uses querySelectorAll, this requires a relatively modern browser

first, get the checked checkbox and change it to Array so that we can map it:

var chk = Array.prototype.slice.call(document.querySelectorAll('[type=checkbox]:checked'));

then map it to get the neighboring td content

var vals = chk.map(function(c){
    // c is the checkbox, 
    // its parent is the TD that contains the checkbox, 
    // the TD's parent is the TR that the checkbox reside
    // the children of the TR is the TDs that we are looking for
    // since you need to get the third column then get the third TD (start from 1, not 0)
    // get the third textContent
    return c.parentNode.parentNode.childNodes[3].textContent;
});

whit this, you get an array of the selected checkbox's third column

you can console.log(vals) to see the content

here's a sample https://jsfiddle.net/665ap2u7/3/

Upvotes: 0

Atimene Nazim
Atimene Nazim

Reputation: 419

Here's my approach : 

 function getPrice()
  {
    var checkedValue=0; 
var inputElements = document.getElementsByClassName('checkbox');

for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue += parseFloat(inputElements[i].value);
           
          
      }
     
}
 alert(checkedValue);
 }
<table border=1 id='products'>
  <tr><td>item id</td><td>item Name</td><td>item Price</td></tr>

  <tr><td><input class="checkbox" type='checkbox' id='p-1' name='prices[]'  onClick='getPrice()' value="300" ></td><td>Rice</td><td>300</td></tr>
  <tr><td><input class="checkbox" type='checkbox' id='p-2' name='prices[]'  onClick='getPrice()' value="200"></td><td>Sugar</td><td>200</td></tr>
  <tr><td><input class="checkbox" type='checkbox' id='p-3' name='prices[]'  onClick='getPrice()' value="100"></td><td>Tea</td><td>100</td></tr>
  </table>

Upvotes: 0

Jamie McElwain
Jamie McElwain

Reputation: 462

Firstly, I recommend using addEventListener over an onClick attribute - this will give us an event to work with that can be used to target the element without querying a selector.

I'd also recommend storing this data and accessing it in a different way than getting the content of an HTML tag - data attributes are a well supported standard.

I've taken the liberty of tidying up the table markup, too, so it has a semantically correct header and body:

<table border=1 id='products'>
  <thead>
    <tr>
      <th>item id</th>
      <th>item Name</th>
      <th>item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' data-product='rice' data-price='300'></td>
      <td>Rice</td>
      <td>300</td>
    </tr>
    <tr>
      <td><input type='checkbox' data-product='sugar' data-price='200'></td>
      <td>Sugar</td>
      <td>200</td>
    </tr>
    <tr>
      <td><input type='checkbox' data-product='tea' data-price='100'></td>
      <td>Tea</td>
      <td>100</td>
    </tr>
  </tbody>
 </table>

With this, we can rewrite our JS to add an event listener to each of the inputs:

let inputs = document.querySelectorAll('input[type="checkbox"]')

for (let input of inputs) {
    input.addEventListener('click', (event) => {
        const product = event.target.dataset.product
        const price = event.target.dataset.price
    })
}

document.querySelectorAll returns an Array of all elements that match the selector on the page.

We can then iterate over this array to do the same thing to each input - in this case, apply an eventListener.

This eventListener will be for the 'click' event, and the second argument is the function that will be run when the event is triggered.

The argument of this second function is event, which contains all the information about the event. We can use event.target to get the element that was clicked, and then event.target.dataset to get all the data properties of that HTML element.

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 192277

You need to get the event object (e). The event object target, is the clicked element. Get the checked property of the target for the if/else. If it's checked, using closest we can get to the tr, and find the requested child:

document.querySelectorAll('#products [type=checkbox]')
  .forEach(function(input) {
    input.addEventListener('click', getPrice);
  });

function getPrice(e) {
  if(e.target.checked) {
    console.log(e.target.closest('tr').children[2].innerText);
  } else {
    console.log('not checked');
  }
}
<table border=1 id='products'>
  <tr>
    <td>item id</td>
    <td>item Name</td>
    <td>item Price</td>
  </tr>

  <tr>
    <td><input type='checkbox' id='p[]' name='prices[]'></td>
    <td>Rice</td>
    <td>300</td>
  </tr>
  <tr>
    <td><input type='checkbox' id='p[]' name='prices[]'></td>
    <td>Sugar</td>
    <td>200</td>
  </tr>
  <tr>
    <td><input type='checkbox' id='p[]' name='prices[]'></td>
    <td>Tea</td>
    <td>100</td>
  </tr>
</table>

Upvotes: 0

Mohamed Abbas
Mohamed Abbas

Reputation: 2288

Using jQuery

let total = 0;

$('.item').on('change', function () {
  let newTotal = total;
  if ($(this).is(':checked')) {
    newTotal = total + Number($(this).parent().parent().find('td:eq(2)').text())
  } else {
    newTotal = total - Number($(this).parent().parent().find('td:eq(2)').text())
  }
  total = Math.max(newTotal, 0);
  $("#total").text(total);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 id='products'>
  <tr><td>item id</td><td>item Name</td><td>item Price</td></tr>

  <tr><td><input type='checkbox' class="item"name='prices[]' ></td><td>Rice</td><td>300</td></tr>
  <tr><td><input type='checkbox'class="item" name='prices[]' ></td><td>Sugar</td><td>200</td></tr>
  <tr><td><input type='checkbox' class="item" name='prices[]' ></td><td>Tea</td><td>100</td></tr>
</table>

Total: <span id="total">0</span>

Upvotes: 0

Related Questions