как посчитать кол-во checkbox
Добрый вечер! Проблемка такая: нужно реализовать учет посещаемости студентов в виде таблицы на сайте wordpress. Возможность редактирования таблицы должна быть только у администратора сайта, то есть после авторизации, можно изменять посещаемость on-line, без захода в сам wordpress. Подскажите как такое сделать, советом или чем еще? Я новичок, не понимаю(( Как подсчитать кол-во отмеченных checkbox, чтобы в конце таблицы в отдельном столбце считалось кол-во пропусков, то есть отмеченных галочек автоматически при изменении одного из столбцов допустим.
Сама таблица ниже, и как написать к ней обработчик, чтобы данные обрабатывались и записывались, помогите, пожалуйста.
Сама таблица ниже, и как написать к ней обработчик, чтобы данные обрабатывались и записывались, помогите, пожалуйста.
Код:
<!DOCTYPE html>
<html>
<head>
<title>Таблицы</title>
<meta charset="utf-8">
<style>
body {
width: 800px;
margin: 40px auto;
font-family: 'trebuchet MS', 'Lucida sans', Arial;
font-size: 14px;
color: #444;
}
table {
*border-collapse: collapse; /* Для IE7 и старше */
border-spacing: 0;
width: 100%;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
</style>
</head>
<body>
<h2>Таблица посещаемости студентов</h2>
<table class="bordered">
<form action="obrabotka.php" method="POST" name="form1">
<thead>
<tr>
<th>№</th>
<th>ФИО</th>
<th><input type="date" name="data1" size="4"></th>
<th><input type="date" name="data2" size="4"></th>
<th><input type="date" name="data3" size="4"></th>
<th><input type="date" name="data4" size="4"></th>
<th><input type="date" name="data5" size="4"></th>
</tr>
</thead>
<tr>
<td><input type="text" name="nomer1" size="2"></td>
<td><input type="text" name="fio1" size="25"></td>
<td><input type="checkbox" name="format1" value="" size="1"> </td>
<td><input type="checkbox" name="format2" value="" size="1"> </td>
<td><input type="checkbox" name="format3" value="" size="1"> </td>
<td><input type="checkbox" name="format4" value="" size="1"> </td>
<td><input type="checkbox" name="format5" value="" size="1"> </td>
</tr>
<tr>
<td><input type="text" name="nomer2" size="2"></td>
<td><input type="text" name="fio1" size="25"></td>
<td><input type="checkbox" name="format1" value="" size="1"> </td>
<td><input type="checkbox" name="format2" value="" size="1"> </td>
<td><input type="checkbox" name="format3" value="" size="1"> </td>
<td><input type="checkbox" name="format4" value="" size="1"> </td>
<td><input type="checkbox" name="format5" value="" size="1"> </td>
</table>
</body>
</html>
<html>
<head>
<title>Таблицы</title>
<meta charset="utf-8">
<style>
body {
width: 800px;
margin: 40px auto;
font-family: 'trebuchet MS', 'Lucida sans', Arial;
font-size: 14px;
color: #444;
}
table {
*border-collapse: collapse; /* Для IE7 и старше */
border-spacing: 0;
width: 100%;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #fbf8e9;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #dce9f9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
background-image: linear-gradient(top, #ebf3fc, #dce9f9);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
</style>
</head>
<body>
<h2>Таблица посещаемости студентов</h2>
<table class="bordered">
<form action="obrabotka.php" method="POST" name="form1">
<thead>
<tr>
<th>№</th>
<th>ФИО</th>
<th><input type="date" name="data1" size="4"></th>
<th><input type="date" name="data2" size="4"></th>
<th><input type="date" name="data3" size="4"></th>
<th><input type="date" name="data4" size="4"></th>
<th><input type="date" name="data5" size="4"></th>
</tr>
</thead>
<tr>
<td><input type="text" name="nomer1" size="2"></td>
<td><input type="text" name="fio1" size="25"></td>
<td><input type="checkbox" name="format1" value="" size="1"> </td>
<td><input type="checkbox" name="format2" value="" size="1"> </td>
<td><input type="checkbox" name="format3" value="" size="1"> </td>
<td><input type="checkbox" name="format4" value="" size="1"> </td>
<td><input type="checkbox" name="format5" value="" size="1"> </td>
</tr>
<tr>
<td><input type="text" name="nomer2" size="2"></td>
<td><input type="text" name="fio1" size="25"></td>
<td><input type="checkbox" name="format1" value="" size="1"> </td>
<td><input type="checkbox" name="format2" value="" size="1"> </td>
<td><input type="checkbox" name="format3" value="" size="1"> </td>
<td><input type="checkbox" name="format4" value="" size="1"> </td>
<td><input type="checkbox" name="format5" value="" size="1"> </td>
</table>
</body>
</html>