CODEWITHSUNDEEP
javascriptjqueryhtmljsp
Chong
Chong

Reputation: 59

Getting the value of TD in a foreach loop

I have this code which show me the list of my item

<tbody class="table-color2">
    <c:forEach var="defect" items="${defectList}">
        <tr>
            <td id="defectId"><a onclick="getDefectId()">${defect.id}</a></td>
            <td>${defect.createdDate}</td>
            <td>${defect.reportedBy.firstName}</td>
            <td>${defect.title}</td>
            <td>${defect.bugtype.description}</td>
            <td>${defect.status.description}</td>
            <td>${defect.priority.description}</td>
        </tr>
    </c:forEach>
</tbody>

what Im trying to do is to get the value of the td id="defectId" when it is clicked, my jquery script for the onclick is this :

function getDefectId(){
    var defectId = $(' #defectId ').val();
    alert("Defect ID " + defectId);
}

but currently, I'm getting a value of undefined, how do I get the value?

Upvotes: 1

Views: 1756

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : use text() instead of val() because you want to know the text inside td and not the value of input element.

EDIT: - Sorry, missed that there are multiple td's. In this case, you must not use same id for all tds. Just make it class and do following changes in function.

function getDefectId(){
   var defectId = $('.defectId').text();
  alert("Defect ID" + defectId);
}

I would suggest to use jQuery event handler instead of calling javascript function. See below code

HTML: remove onclick call

<td class="defectId"><a href="#">${defect.id}</a></td>

jQuery : register a click handler and read text

$(function(){
   $('.defectId a').click(function(){
      var defectId = $(this).text();
      alert(defectId);
   });
});

Upvotes: 2

Hackerman
Hackerman

Reputation: 12295

You can do the following(remember that id needs to be unique):

<td class="defectId"><a onclick="getDefectId(${defect.id})">${defect.id}</a></td>

And in you function:

function getDefectId(value){
  alert("Defect ID " + value);
}

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337626

You have several issues. Firstly you're appending the same id in a loop, which will result in duplicates which is invalid. Also, a elements don't have a value to retrieve so you need to use text(). Finally note that using your current method would mean that you need to pass the this reference of the clicked element to the function.

However you can tidy all that up by using classes and hooking up the event in JS. Try this:

<tbody class="table-color2">
    <c:forEach var="defect" items="${defectList}">
        <tr>
            <td class="defect"><a href="#">${defect.id}</a></td>
            <td>${defect.createdDate}</td>
            <td>${defect.reportedBy.firstName}</td>
            <td>${defect.title}</td>
            <td>${defect.bugtype.description}</td>
            <td>${defect.status.description}</td>
            <td>${defect.priority.description}</td>
        </tr>
    </c:forEach>
</tbody>

$(function() {
    $('.defect a').click(function(e) {
        e.preventDefault();
        console.log($(this).text());
    });
});

Working example

Upvotes: 4

Related Questions