Solved

jQuery with dynamic id

Posted on 2011-09-12
2
399 Views
Last Modified: 2012-05-12
Hi,

Am trying to get the values of a <td> tag in jQuery function which am not getting it.  Here is the code.  The line which is bold and italic is the point where i need the value of tag <td>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<%@page import="java.util.List"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Tremor VTQ Page</title>
<style type="text/css">
.even {
      background-color: silver;
}
</style>
<style type="text/css" media="screen">
    .jqplot-axis {
      font-size: 0.85em;
    }
    .jqplot-title {
      font-size: 1.1em;
    }
</style>
<link rel="stylesheet" type="text/css" href="/js/jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="<c:url value="/js/jquery.js"/>"></script>
<script language="javascript" type="text/javascript" src="<c:url value="/js/jquery.jqplot.js"/>"></script>
<script language="javascript" type="text/javascript" src="<c:url value="/js/jqplot.canvasTextRenderer.min.js"/>"></script>
<script language="javascript" type="text/javascript" src="<c:url value="/js/jqplot.canvasAxisLabelRenderer.min.js"/>"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
            function (){
                  alert('Inside JS.');
                  $.jqplot.config.enablePlugins = true;
                  var nocArr = [];
                  var times = [];                                    
                  for (var i=0;  i<20; i++) {
                        alert(i+' -- '+$("#numOccurences"+i).data());
                      nocArr.push([i, $("div#numOccurences"+i)]);
                    }
                    var plot1 = $.jqplot("chart1", [[nocArr]]);
            });
</script>
</head>
<body>
<div id="mainDiv" title="Main Block" style="border: 1px;border-color: black; background-color: white">
      <table id="mainTab" style="border: thick; border-color: black" cellpadding="5" rules="all">
            <tr id="graphrow">
                  <td>
                        <div id="dataDiv" style="margin-top:20px; margin-left:20px; width:360px; height:600px; overflow: scroll; border: medium" >
                              <c:if test="${fn:length(numOccurrences) > 0}">
                                    <table id = "tableGraph" cellpadding="5">
                                          <thead id="tableheader" valign="top">
                                                <tr class="even">
                                                      <th>Number of Occurrences </th>
                                                      <th>Generated Time </th>
                                                </tr>
                                          </thead>
                                          
                                          <c:forEach items="${numOccurrences}" varStatus="status">
                                          <tr>
                                                <td id="numOccurences${status.index}">${numOccurrences[status.index]}</td>
                                                <td id="timeInterval${status.index}">${timeInterval[status.index]}</td>
                                          </tr>
                                          </c:forEach>
                                    </table>
                              </c:if>
                        </div>
                  </td>
                  <td id ="count" style="width: 1px" title="${fn:length(numOccurrences)}"/>
                  <td>
                        <div id="chart1" style="margin-top:2px; margin-left:20px; width:360px; height:300px;"></div>
                  </td>
            </tr>
      </table>
</div>
</body>
</html>
0
Comment
Question by:lakkarajumurali
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36523468
what about :

$(document).ready(
            function (){
                  alert('Inside JS.');
                  $.jqplot.config.enablePlugins = true;
                  var nocArr = [];
                  var times = [];
$("td:eq(0)","#tableGraph tr").each(function(i, el) {
                        alert(i+' -- '+$(this).text());
                      nocArr.push([i, $("div#numOccurences"+i)]);
})  
                       
                    var plot1 = $.jqplot("chart1", [[nocArr]]);
            });
0
 

Author Comment

by:lakkarajumurali
ID: 36523827
Great it works!! thank you.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
sumDigits  challenge 7 61
network + 7 73
count11 challenge 6 47
wordlen challenge 3 47
This was posted to the Netbeans forum a Feb, 2010 and I also sent it to Verisign. Who didn't help much in my struggles to get my application signed. ------------------------- Start The idea here is to target your cell phones with the correct…
Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
Viewers learn about the “for” loop and how it works in Java. By comparing it to the while loop learned before, viewers can make the transition easily. You will learn about the formatting of the for loop as we write a program that prints even numbers…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now