CODEWITHSUNDEEP
javascriptjquery
user2870274
user2870274

Reputation: 73

read div element value in a table in jquery by clicking

Suppose I have table structure in html like: 

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 1 </div>
   <div id=rowID2 > 2 </div>
   <div id=rowID3 > 3 </div>

  </div>
</tr>

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 4 </div>
   <div id=rowID2 > 5 </div>
   <div id=rowID3 > 6 </div>

  </div>
</tr>

<tr class="myTable">
  <div class"Row" id= "myRow">
   <div id=rowID1 > 7 </div>
   <div id=rowID2 > 8 </div>
   <div id=rowID3 > 9 </div>

  </div>
</tr>

Each tr is a row of a table and When I click on each row I want to show 1, 4 and 7 which is the first div element. when I tried console.log(document.getElementById("rowID1").innerHTML); for every row that I clicked I get "1" but I want it to show different values. I cannot change the IDs (so rowID1 is fixed). any idea of how to get different values by clicking?

Upvotes: 1

Views: 220

Answers (5)

Mithlesh Kumar
Mithlesh Kumar

Reputation: 758

First in html code should be unique so either remove all "myRow" or change them. Now, getting value of each div on click on it below code may be solve your problem:

<table>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">1</div>
                <div class="rowID2">2</div>
                <div class="rowID3">3</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">4</div>
                <div class="rowID2">5</div>
                <div class="rowID3">6</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">7</div>
                <div class="rowID2">8</div>
                <div class="rowID3">9</div>
            </div>
        </td>
    </tr>
</table>

Update your html like this. Then here is your solution:-

$("table tr").on("click",function(e){

   var targetNode = e.target, parentNode, childNode, firstChildValue,
   hasChild=(targetNode.children.length>0) ? 1:0;

   parentNode = (hasChild) ? targetNode.children[0]: targetNode.parentNode; // get parent node of target node
   child = parentNode.children; // get all its children
   firstChildValue = child[0].innerHTML; // get value of first child
   alert(firstChildValue);
});

Fiddle Example

I hope it will help you.

Upvotes: 3

Ulug&#39;bek
Ulug&#39;bek

Reputation: 2832

You know, get by id always returned only one element because id must be identically, but get by class returned always array, if it found no one, it returned [] (empty array). You can check yourself by using jquery like that:

$('#anyId') <-- it is get by id

$('.anyClassName') <-- it is get by class name

<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="jquery-1.8.1.min.js"></script>

<script>
    $(function() {
      $('.Row div').click(function(e) {
        var currentDiv = $(e.currentTarget);
        currentClass = currentDiv.attr('class');
        console.log($('.' + currentClass).text());
      });

    });
</script>

</head>

<body>
<table>
<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 1 </div>
   <div class=rowID2 > 2 </div>
   <div class=rowID3 > 3 </div>

  </div>
</tr>

<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 4 </div>
   <div class=rowID2 > 5 </div>
   <div class=rowID3 > 6 </div>

  </div>
</tr>

<tr class="myTable">
  <div class="Row" id= "myRow">
   <div class=rowID1 > 7 </div>
   <div class=rowID2 > 8 </div>
   <div class=rowID3 > 9 </div>

  </div>
</tr>
</table>
</body>
</html>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, your HTML is invalid as you need to put td elements inside the tr, the id attributes should be quoted, you are missing an = on the row class attribute, and you have lots of repeated id attributes. Once that's fixed:

<table>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">1</div>
                <div class="rowID2">2</div>
                <div class="rowID3">3</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">4</div>
                <div class="rowID2">5</div>
                <div class="rowID3">6</div>
            </div>
        </td>
    </tr>
    <tr class="myTable">
        <td>
            <div class="Row">
                <div class="rowID1">7</div>
                <div class="rowID2">8</div>
                <div class="rowID3">9</div>
            </div>
        </td>
    </tr>
</table>

This jQuery code will work:

$('.Row div').click(function() {
    var idx = $(this).index() + 1;
    var values = $('.rowID' + idx).map(function() {
        return this.innerText;
    }).get().join(',');

    alert(values);
});

Example fiddle

Upvotes: 4

Vincent Edward Gedaria Binua
Vincent Edward Gedaria Binua

Reputation: 368

Although your ID may be semantically wrong, being that the ID must be unique, I would assume your ID must be enclosed with quotations.

You have to loop through the ID using each function. Here's the code I posted over jsfiddle

$(function(){

            $('div#myRow').click(function(){

                $('div#rowID1').each(function(){

                    var text = $(this).text();

                    alert(text);

                });
            });
        });

Here's to get just the child div with id rowID1:

$(function(){
$('div#myRow').click(function(){

    var text = $(this).children('#rowID1').text();

    alert(text);

    });

});

Upvotes: 1

Andy Holmes
Andy Holmes

Reputation: 8047

id=rowID1

id's MUST be unique and only used once, so your javascript is always going to get the first instance of the id. I would use classes and then do something like this in jQuery:

$(document).ready(function(){
    $('.Row').on('click', function(){
        console.log($(this).closest('#rowID1').text());
    });
});

Remember to change IDs though, classes should be used

Upvotes: 0

Related Questions