• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 410
  • Last Modified:

jQuery with dynamic id

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
lakkarajumurali
Asked:
lakkarajumurali
1 Solution
 
leakim971PluritechnicianCommented:
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
 
lakkarajumuraliAuthor Commented:
Great it works!! thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now