Динамическое изменение id у div элемента. Не получается реализовать уникальные ид каждой ячейки таблицы

254
26 февраля 2017, 10:33

Добрый день, уважаемые пользователи. Прошу помочь в ситуации.

Пишу страничку для внесения информации о графиках сотрудника. Количество таблиц зависит от количества секторов, на которых зарегистрированы сотрудники. Количество записей каждой таблицы соответствует количеству сотрудников сектора. Количество столбцов таблицы зависит от месяца, т.е. сколько дней, столько столбцов.

На странице в всплывающем окне заносится информация по конкретному дню, передается в обработчик с помощью AJAX, данные записываются в БД (тут проблем нет), проблема в том, что необходимо каждый раз при обновлении страницы, в зависимости от выбранных параметров раскрашивать определенным цветом ячейку таблицы, т.е. у меня к td с классом .day должно добавляться ид в формате: ТАБЕЛЬНЫЙ_НОМЕР_ГОД_МЕСЯЦ_ДАТА и потом по конкретному ид, который содержит нужное мне значение я буду раскрашивать ячейки с помощью JQuery.

Прошу помочь в решении проблемы. Код динамической отрисовки таблиц:

//Выбор всех операторов, сортировка по рабочему сектору
$sql = "SELECT t1.tabNo, t1.sector, t2.otdelname, t1.name, t3.date, t3.cause
              FROM operators as t1
               JOIN otdel as t2 on t1.napravlenie = t2.id
               LEFT JOIN day_detail as t3 on t1.tabNo= t3.tabNo
           WHERE rol = '1'  
               AND admin = 0
          ORDER BY sector, name ASC
        ";
$query = mysqli_query($connect,$sql); //Выполнение запроса в БД;
//Результат выполнения загоняем в массив peopInfo
$i=0;
$j=0;
$sector1 = -1;
$cols = $countDay; // количество столбцов, td - Определяется динамически, зависит от месяца (сколько дней, столько столбцов)
while ($auxiliaryArr = mysqli_fetch_assoc($query))
{      
        //массив peopleInfo содержит данные: табельный номер оператора, имя оператора, № сектора, имя сектора, дату по которой вносится информация, причину изменения записи
        $peopleInfo[$i]['tabNo'] = $auxiliaryArr['tabNo'];
        $peopleInfo[$i]['name'] = $auxiliaryArr['name'];
        $peopleInfo[$i]['sector'] = $auxiliaryArr['sector'];
        $peopleInfo[$i]['otdel'] = $auxiliaryArr['otdel'];
        $peopleInfo[$i]['date'] = $auxiliaryArr['date'];
        $peopleInfo[$i]['cause'] = $auxiliaryArr['cause'];
        if ($auxiliaryArr['sector'] != $sector1)
                {
                        if ($i!=0)
                        {
                                echo '</table>';
                        }
                        echo '<table class = "tableEmployee" ; <colgroup> <col width = "400px"; > </colgroup>';
                        echo "<br>";
                        echo '<caption id="sector";> '.$peopleInfo[$j]['otdel'].' </caption>';
                        echo '<tr>
                                        <td id="fio"; rowspan = "2";> ФИО </td>
                                        <td id="tabNo"; rowspan="2";> Табельный номер </td>
                                        <td id="day"; colspan="31"; style="background:#fffff";> Дата </td>
                                </tr>';
                        //Выводим в таблицу строку с датой (прим.: 01, 02, 03)
                                $dateArr = Array(); //Вспомогательный массив
                                $d = 1; //Нумерация дня с 1-го числа каждого месяца
                                while ($d <= $countDay):
                                        $dateArr[$d]['day'] = $d;
                                        echo '<td id="chislo"> '.htmlspecialchars($dateArr[$d]['day']).' </td> ';
                                        $sector1= $auxiliaryArr['sector']; //присвоение "пустой" переменной значения id сектора из массива $auxiliaryArr
                                        $d++;
                                endwhile;
                        //цикл динамичной отрисовки таблиц
                }
                        echo "<tr>";
                        for ($td=1;$td<$cols+2;$td++)
                        {      
                                $id[$j] = strtoupper($peopleInfo[$j]['tabNo']);
                                if($td == 1)
                                {
                                        echo "<th class='fio'; title='Внести информацию по сотруднику'>".$peopleInfo[$j]['name']."</th>";
                                        echo "<th class='login';> ".strtoupper($peopleInfo[$j]['tabNo'])." </th>";
                                } else
                                {
                                        echo "<td class='day' >".substr($peopleInfo[$j]['cause'],0,1)."</td>";
                                }
                        }              
                        echo "</tr>";                          
                        $i++;
                        $j++;
}
echo "</table>";

Пролистывание месяцев и, соответственно, изменение количество столбцов делаю с помощью функции в этом же файле:

<?PHP
$countDay = my_calendar(array(date("Y-m-d")));
function my_calendar($fill=array()){
  $month_names=array("Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь");
        if (isset($_GET['y']))
                $y=$_GET['y'];
        if (isset($_GET['m']))
                $m=$_GET['m'];
        if (!isset($y) OR $y < 1970 OR $y > 2037)
                $y=date("Y");
        if (!isset($m) OR $m < 1 OR $m > 12)
                $m=date("m");
        $month_stamp=mktime(0,0,0,$m,1,$y);
        $prev=date('?\m=m&\y=Y',mktime (0,0,0,$m-1,1,$y));  
        $next=date('?\m=m&\y=Y',mktime (0,0,0,$m+1,1,$y));
        $i=0;
?>
<table class="tableMonth">
 <tr>
  <td>
        <table>
    <tr>
     <td align="left"><a href="<? echo $prev . " " ?>"><<<&nbsp;&nbsp;</a></td>
     <td id="month_year" align="center"><? echo $m.".".$y ?></td>
     <td align="right"><a href="<? echo $next ?>">&nbsp;&nbsp;>>></a></td>
    </tr>
   </table>
  </td>
 </tr>
</table>
<?PHP
echo '<hr>';
if ($m == 4 || $m == 6 || $m == 9 || $m == 11){
        $countdays = 30;
        return $countdays;
} elseif ($m == 2){
        $countdays = 28;
        return $countdays;
} else {
        $countdays = 31;
        return $countdays;
        }
}
?>
Answer 1

Это у вас не получается?

$id=$peopleInfo[$j]['tabNo'].'_'.$year.'_'.$mounth.'_'.$td-4;
echo "<td class='day' id='$id'>".substr($peopleInfo[$j]['cause'],0,1)."</td>";

Теоретически, ID в принципе не нужен. Можно легко узнать, по какой ячейке кликнули:

$('#table td').click(function(){ 
    
   //определяем координаты ячейки: 
   var x=$(this).index()+1, 
   y=$(this).closest('tr').index()+1; 
 
   console.log('Кликнули ячейку ',x,y) 
    
   //используя координаты находим нужный с помощью jQuery: 
   $('#table tr:nth-child('+y+')  td:nth-child('+x+')').toggleClass('active') 
    
})
#table {width: 100%} 
#table td {  border: 1px solid #ccc} 
#table td.active {  border: 1px solid red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table id=table> 
  <tr> 
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td><td></td><td></td><td></td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td><td></td><td></td><td></td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td><td></td><td></td><td></td> 
  </tr> 
</table>

READ ALSO
Как спарсить ответ json

Как спарсить ответ json

get посылаю так:

278
Каким образом обфусцирован этот код? [требует правки]

Каким образом обфусцирован этот код? [требует правки]

Каким способом зашифрован этот код? Обычные обфускаторы либо через eval , либо просто заменой переменных шифруют

225
react.js и WebRTC RTCPeerConnection.addStream is not an object

react.js и WebRTC RTCPeerConnection.addStream is not an object

Я хочу сделать небольшой чат с WebRTC и reactjs

339
Динамическая переменная в jquery

Динамическая переменная в jquery

Возможно ли на jquery реализовать динамическую переменную подобно angular js? Те

360