如何获取动态生成的td属性和内部元素id标记的值，且在js / jquery中具有tr的id

Question

I trying to build a calendar of events with PHP, jQuery and ajax. The calendar is integrated in HTML table, the rows and fields of a table are generated dynamically according to the number of days in a certain month. I need to get the values of td elements by id (days in calendar) and the values of divs by id that are created inside the table (event id number). I need unique id numbers in order create/edit/delete events and store them in database.

The problem is that id number is generated with rows and fields dynamically and I dont know them in advance. Otherwise if I knew the id number in advance it would not be a problem. Please give me any hint in this situation.

These loops are generating table rows and fields id numbers:

$month_row = 1;
$calendar .= "<table id='calendar-grid' class='table table-bordered calendar-grid'>";
$calendar .= "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>";
$calendar .= "<tr id='row_".$month_row."' class='calendar_row'>";
for($i = 1; $i <= $offset; $i++){
    $calendar .= "<td></td>";   // generate empty fields according to offset number
}
for($day = 1; $day <= $daysInMonth; $day++) {           
    if( ($day + $offset - 1) % 7 == 0 && $day != 1) {
        $month_row++;
        $calendar .= "</tr><tr id='row_".$month_row."' class='calendar_row'>"; 
        $rows++;
    }
    if($currentDay == $day && date("F") == date("F", $date)){
        $calendar .= "<td id='date_". date("Y-m").'-'.$day ."' class='eventList currentDay'>" . $day . "</td>";
    }
    else{
        if(($day + $offset - 1) % 7 == 0){
            $calendar .= "<td id='date_". date("Y-m").'-'.$day ."' class='eventList Sunday'>" . $day . "</td>";
        }else{
            $calendar .= "<td id='date_". date("Y-m").'-'.$day."' class='eventList'>" . $day . "</td>";
        }           
    }   
}

while( ($day + $offset) <= $rows * 7)
{
    $calendar .= "<td></td>";
    $day++;
}
$calendar .= "</tr>";
$calendar .= "</table>";
echo '</div>';

![enter image description here][1]

And this is a how a genrated table looks.

)

This is a script:

http://screencast.com/t/yhWbeEC1nfxo

Answer 1

You start off with the list of rows with class calendarRow , then you drill into each row, and get the list of days in that row, and then the list of events for each day:

$(function() {
    // Get all the rows
    var calendarRows = $("tr.calendar_row");

    // Drill down to each row
    calendarRows.each( function(rowIndex, selectedRow) {
        // Print out the row ID
        console.log("Row ID = "+selectedRow.attr("id"));

        var calendarDays = selectedRow.find("td.eventList");

        // Drill down to each day
        calendarDays.each( function(dayIndex, selectedDay) { 
            // Print out the day ID
            console.log("Day ID = "+selectedDay.attr("id"));

            var events = selectedDay.find("div.eventStyle");

            // Drill down to each event
            events.each( function(eventIndex, selectedEvent) { 
                // Print out the event details
                console.log("Event number "+eventIndex+" has ID="+selectedEvent.attr("id")+" and text="+selectedEvent.text());
            });
        });
    });
});

Note you don't have to iterate through all the rows or all the days to get event details. You can just do this:

$(function() {
    var events = $("div.eventStyle");

    // Drill down to each event
    events.each( function(eventIndex, selectedEvent) { 
        // Print out the event details
        console.log("Event number "+eventIndex+" has ID="+selectedEvent.attr("id")+" and text="+selectedEvent.text()+" and has parent with ID="+selectedEvent.parent().attr("id"));
    });
});