Jump to content

Optaining the clicked value from a table in an input

zazu

By zazu
in Javascript Help

 Share
Go to solution Solved by Barand,

Recommended Posts

zazu Member

zazu

Posted
Posted

Hi guys, i have a table with 6 COLS and 12 ROWS. In the first column is a filed with dimensions (4 ml) and in the other 5 columns are the prices with are different one from another.

 

What i like to do is when i click on a cell from the table to autocomplete bellow 2 inputs 1 with dimension and another with the price from that cell.

 

I've manage to do the first part but the secound one i don't know how to do. Please have a look at my code below.

  (function () {
    if (window.addEventListener) {
        window.addEventListener('load', run, false);
    } else if (window.attachEvent) {
        window.attachEvent('onclick', run);
    }

    function run() {
        var t = document.getElementById('myTable');
        t.onclick = function (event) {
            event = event || window.event; //IE8
            var target = event.target || event.srcElement;
            while (target && target.nodeName != 'TR') { // find TR
                target = target.parentElement;
            }
            //if (!target) { return; } //tr should be always found
            //var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement
            var cells = target.getElementsByTagName('td'); //alternative

            var f1 = document.getElementById('Inaltime / Dimensiune');
            var f2 = document.getElementById('Ø 14');
            var f3 = document.getElementById('Ø 16');
            var f4 = document.getElementById('Ø 18');
            var f5 = document.getElementById('Ø 20');
            var f6 = document.getElementById('Ø 25');
            f1.value = cells[0].innerHTML;
            f2.value = cells[1].innerHTML;
            f3.value = cells[2].innerHTML;
            f4.value = cells[3].innerHTML;
            f5.value = cells[4].innerHTML;
            f6.value = cells[5].innerHTML;
            //console.log(target.nodeName, event);
        };
    }

})();

            <table id="myTable" class="demo">
              <caption>
                <h3>Sisteme de cosuri fum TONA <span class="orange-price">- 15% REDUCERE</span></h3></caption>
              <thead>
                <tr>
                  <th>
                    Inaltime / Dimensiune
                  </th>
                  <th>Ø 14</th>
                  <th>Ø 16</th>
                  <th>Ø 18</th>
                  <th>Ø 20</th>
                  <th>Ø 25</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>5 ml
                    <br>
                  </td>
                  <td><span class="old-price">583 EUR</span>
                    <br>
					<span class="orange-price">496 EUR</span>
                  </td>
                  <td><span class="old-price">630 EUR</span>
                    <br>
					<span class="orange-price">536 EUR</span>
                  </td>
                  <td><span class="old-price">661 EUR</span>
                    <br>
					<span class="orange-price">562 EUR</span>
                  </td>
                  <td><span class="old-price">704 EUR</span>
                    <br>
					<span class="orange-price">598 EUR</span>
                  </td>
                  <td><span class="old-price">1125 EUR</span>
                    <br>
					<span class="orange-price">956 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>5.5 ml</td>
                  <td><span class="old-price">608 EUR</span>
                    <br>
					<span class="orange-price">517 EUR</span>
                  </td>
                  <td><span class="old-price">659 EUR</span>
                    <br>
					<span class="orange-price">560 EUR</span>
                  </td>
                  <td><span class="old-price">692 EUR</span>
                    <br>
					<span class="orange-price">588 EUR</span>
                  </td>
                  <td><span class="old-price">737 EUR</span>
                    <br>
					<span class="orange-price">626 EUR</span>
                  </td>
                  <td><span class="old-price">1187 EUR</span>
                    <br>
					<span class="orange-price">1009 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>6 ml</td>
                  <td><span class="old-price">634 EUR</span>
                    <br>
					<span class="orange-price">539 EUR</span>
                  </td>
                  <td><span class="old-price">687 EUR</span>
                    <br>
					<span class="orange-price">584 EUR</span>
                  </td>
                  <td><span class="old-price">722 EUR</span>
                    <br>
					<span class="orange-price">614 EUR</span>
                  </td>
                  <td><span class="old-price">770 EUR</span>
                    <br>
					<span class="orange-price">655 EUR</span>
                  </td>
                  <td><span class="old-price">1250 EUR</span>
                    <br>
					<span class="orange-price">1063 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>6.5 ml</td>
                  <td><span class="old-price">659 EUR</span>
                    <br>
					<span class="orange-price">560 EUR</span>
                  </td>
                  <td><span class="old-price">716 EUR</span>
                    <br>
					<span class="orange-price">609 EUR</span>
                  </td>
                  <td><span class="old-price">752 EUR</span>
                    <br>
					<span class="orange-price">639 EUR</span>
                  </td>
                  <td><span class="old-price">803 EUR</span>
                    <br>
					<span class="orange-price">683 EUR</span>
                  </td>
                  <td><span class="old-price">1313 EUR</span>
                    <br>
					<span class="orange-price">1117 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>7 ml</td>
                  <td><span class="old-price">685 EUR</span>
                    <br>
					<span class="orange-price">582 EUR</span>
                  </td>
                  <td><span class="old-price">745 EUR</span>
                    <br>
					<span class="orange-price">633 EUR</span>
                  </td>
                  <td><span class="old-price">782 EUR</span>
                    <br>
					<span class="orange-price">665 EUR</span>
                  </td>
                  <td><span class="old-price">836 EUR</span>
                    <br>
					<span class="orange-price">711 EUR</span>
                  </td>
                  <td><span class="old-price">1375 EUR</span>
                    <br>
					<span class="orange-price">1169 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>7.5 ml</td>
                  <td><span class="old-price">710 EUR</span>
                    <br>
					<span class="orange-price">604 EUR</span>
                  </td>
                  <td><span class="old-price">774 EUR</span>
                    <br>
					<span class="orange-price">660 EUR</span>
                  </td>
                  <td><span class="old-price">812 EUR</span>
                    <br>
					<span class="orange-price">690 EUR</span>
                  </td>
                  <td><span class="old-price">869 EUR</span>
                    <br>
					<span class="orange-price">739 EUR</span>
                  </td>
                  <td><span class="old-price">1438 EUR</span>
                    <br>
					<span class="orange-price">1222 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>8 ml</td>
                  <td><span class="old-price">735 EUR</span>
                    <br>
					<span class="orange-price">625 EUR</span>
                  </td>
                  <td><span class="old-price">803 EUR</span>
                    <br>
					<span class="orange-price">683 EUR</span>
                  </td>
                  <td><span class="old-price">843 EUR</span>
                    <br>
					<span class="orange-price">717 EUR</span>
                  </td>
                  <td><span class="old-price">902 EUR</span>
                    <br>
					<span class="orange-price">767 EUR</span>
                  </td>
                  <td><span class="old-price">1500 EUR</span>
                    <br>
					<span class="orange-price">1275 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>8.5 ml</td>
                  <td><span class="old-price">761 EUR</span>
                    <br>
					<span class="orange-price">647 EUR</span>
                  </td>
                  <td><span class="old-price">831 EUR</span>
                    <br>
					<span class="orange-price">706 EUR</span>
                  </td>
                  <td><span class="old-price">873 EUR</span>
                    <br>
					<span class="orange-price">742 EUR</span>
                  </td>
                  <td><span class="old-price">935 EUR</span>
                    <br>
					<span class="orange-price">795 EUR</span>
                  </td>
                  <td><span class="old-price">1563 EUR</span>
                    <br>
					<span class="orange-price">1329 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>9 ml</td>
                  <td><span class="old-price">802 EUR</span>
                    <br>
					<span class="orange-price">682 EUR</span>
                  </td>
                  <td><span class="old-price">876 EUR</span>
                    <br>
					<span class="orange-price">745 EUR</span>
                  </td>
                  <td><span class="old-price">919 EUR</span>
                    <br>
					<span class="orange-price">781 EUR</span>
                  </td>
                   <td><span class="old-price">984 EUR</span>
                    <br>
					<span class="orange-price">836 EUR</span>
                  </td>
                  <td><span class="old-price">1642 EUR</span>
                    <br>
					<span class="orange-price">1396 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>9.5 ml</td>
                   <td><span class="old-price">827 EUR</span>
                    <br>
					<span class="orange-price">703 EUR</span>
                  </td>
                  <td><span class="old-price">905 EUR</span>
                    <br>
					<span class="orange-price">769 EUR</span>
                  </td>
                  <td><span class="old-price">949 EUR</span>
                    <br>
					<span class="orange-price">807 EUR</span>
                  </td>
                  <td><span class="old-price">1017 EUR</span>
                    <br>
					<span class="orange-price">864 EUR</span>
                  </td>
                  <td><span class="old-price">1704 EUR</span>
                    <br>
					<span class="orange-price">1448 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>10 ml</td>
                  <td><span class="old-price">853 EUR</span>
                    <br>
					<span class="orange-price">725 EUR</span>
                  </td>
                  <td><span class="old-price">934 EUR</span>
                    <br>
					<span class="orange-price">794 EUR</span>
                  </td>
                  <td><span class="old-price">979 EUR</span>
                    <br>
					<span class="orange-price">832 EUR</span>
                  </td>
                  <td><span class="old-price">1050 EUR</span>
                    <br>
					<span class="orange-price">893 EUR</span>
                  </td>
                  <td><span class="old-price">1767 EUR</span>
                    <br>
					<span class="orange-price">1502 EUR</span>
                  </td>
                </tr>
                <tbody>
            </table>
  • Solution
Barand Prolific Member

Barand

Posted
  • Solution
Posted

I'd make use of data attributes to get the data in one place when clicked. Here's an example using a couple of your rows

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Primes & Factors</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".old-price, .orange-price").click(function() {
            var vol = $(this).data('vol');
            var price = $(this).html();
            $("#vol").val(vol);
            $("#price").val(price);
        })
        
    })
</script>
<style type="text/css">
    .old-price, .orange-price {
        cursor: pointer;
    }
    caption {
        font-size: 14pt;
        font-weight: 600;
    }
</style>
</head>
<body>
            <table id="myTable" class="demo">
              <caption>
                Sisteme de cosuri fum TONA <span class="orange-price">- 15% REDUCERE</span>
              </caption>
              <thead>
                <tr>
                  <th>
                    Inaltime / Dimensiune
                  </th>
                  <th>Ø 14</th>
                  <th>Ø 16</th>
                  <th>Ø 18</th>
                  <th>Ø 20</th>
                  <th>Ø 25</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>5 ml
                    <br>
                  </td>
                  <td><span data-vol='5' class="old-price">583 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">496 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">630 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">536 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">661 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">562 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">704 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">598 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">1125 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">956 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>5.5 ml</td>
                  <td><span data-vol='5.5' class="old-price">608 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">517 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">659 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">560 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">692 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">588 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">737 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">626 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">1187 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">1009 EUR</span>
                  </td>
                </tr>
              </tbody>
            </table>
<br>
Chosen volume <input type="text" name="vol" id="vol" size="5">
Chosen price <input type="text" name="price" id="price" size="8">
</body>
</html>
zazu Member

zazu

Posted
  • Author
Posted

 

I'd make use of data attributes to get the data in one place when clicked. Here's an example using a couple of your rows

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Primes & Factors</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".old-price, .orange-price").click(function() {
            var vol = $(this).data('vol');
            var price = $(this).html();
            $("#vol").val(vol);
            $("#price").val(price);
        })
        
    })
</script>
<style type="text/css">
    .old-price, .orange-price {
        cursor: pointer;
    }
    caption {
        font-size: 14pt;
        font-weight: 600;
    }
</style>
</head>
<body>
            <table id="myTable" class="demo">
              <caption>
                Sisteme de cosuri fum TONA <span class="orange-price">- 15% REDUCERE</span>
              </caption>
              <thead>
                <tr>
                  <th>
                    Inaltime / Dimensiune
                  </th>
                  <th>Ø 14</th>
                  <th>Ø 16</th>
                  <th>Ø 18</th>
                  <th>Ø 20</th>
                  <th>Ø 25</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>5 ml
                    <br>
                  </td>
                  <td><span data-vol='5' class="old-price">583 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">496 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">630 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">536 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">661 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">562 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">704 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">598 EUR</span>
                  </td>
                  <td><span data-vol='5' class="old-price">1125 EUR</span>
                    <br>
                    <span data-vol='5' class="orange-price">956 EUR</span>
                  </td>
                </tr>
                <tr>
                  <td>5.5 ml</td>
                  <td><span data-vol='5.5' class="old-price">608 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">517 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">659 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">560 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">692 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">588 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">737 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">626 EUR</span>
                  </td>
                  <td><span data-vol='5.5' class="old-price">1187 EUR</span>
                    <br>
                    <span data-vol='5.5' class="orange-price">1009 EUR</span>
                  </td>
                </tr>
              </tbody>
            </table>
<br>
Chosen volume <input type="text" name="vol" id="vol" size="5">
Chosen price <input type="text" name="price" id="price" size="8">
</body>
</html>

 

It work very well, but how can i do if i want to put in another inpute the values of

<th>Ø 14</th>

<th>Ø 16</th>

<th>Ø 18</th>

<th>Ø 20</th>

<th>Ø 25</th>

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.