4 февраля 2014

Удаление checkbox

JavaScript

Выпускаю очередной материал, можно так сказать вне плановый, а по просьбе нашего читателя. Тема такова, что думаю одним материалом не ограничишься, так как информации по ней очень много и в одном уроке всего не изложить. И так, тема урока связанна с записями, хранящимися в базе данных, а именно в этом материале мы рассмотрим удаление записей из базы данных посредством checkbox.

ШАГ ПЕРВЫЙ. База данных.

Создаем базу данных mybd с привилегиями: логин - root, пароль - "".

В базе будет всего одна таблица, нам пока больше и не нужно, а именно articles с двумя полями id и title.

Структура и дамп таблицы articles.

--
-- Table structure for table `articles`
--

CREATE TABLE IF NOT EXISTS `articles` (
  `id` int(100) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=25 ;

--
-- Dumping data for table `articles`
--

INSERT INTO `articles` (`id`, `title`) VALUES
(15, 'Первая'),
(16, 'Вторая'),
(17, 'Третья'),
(18, 'Четвертая'),
(19, 'Пятая'),
(20, 'Шестая'),
(21, 'Седьмая'),
(22, 'Восьмая'),
(23, 'Девятая'),
(24, 'Десятая');

ШАГ ВТОРОЙ. PHP, JavaScript, HTML. Файл index.php и bd.php.

Для начала подключимся к базе данных mybd. В файле bd.php прописываем соединение:

<?
/* Подключаемся к базе данных */
$db = mysql_connect("localhost", "root", "");
mysql_select_db("mybd", $db);
/* Устанавливаем кодировку */
mysql_set_charset("UTF8", $db);
mysql_query("SET NAMES 'UTF8'");
if(!$db) echo mysql_error();
?>

Теперь нам потребуется скрипт для checkbox, который был подробно изложен в прошлом уроке выделение checkbox на JavaScript.

<script type="text/javascript">
function setCheckBox(checked) {   
var checkbox = document.getElementsByTagName('input');
for(var i=0;i!=checkbox.length;i++) {
if (checkbox[i].type == 'checkbox') { 
checkbox[i].checked = checked;
}
}
return true;
}
</script>

Далее мы открываем тег form с методом post и действием на файл index.php. Он нужен нам, чтобы мы могли удалить запись(и) из базы данных.

<form name="index" action="index.php" method="post">

Далее подключаем файл bd.php.

include_once("bd.php");

Теперь реализуем запрос, который при нажатии кнопки input с именем delete, удалит запись(и) из базы данных.

if (isset($delete)) 
{
$count = count($page);
for ($i=0; $i<$count; $i++)
{
$id = $page["$i"];
$sql = mysql_query("DELETE FROM articles WHERE id=$id");
if (!$res) echo mysql_error();
}
echo "<meta http-equiv=Refresh content='0; URL=index.php'>";
}       
echo "<input class='delete_input' name='delete' type='submit' value='Удалить'><br><br>";

А теперь просто выводим записи из таблицы articles. Надеюсь, понятно откуда взялась переменная $i++, которая ничего не делает, как только увеличивает при добавление запись в таблицу на единицу.

Ну и для каждого td свои классы.

$sql = mysql_query("select id, title from articles");                                             
@$row=mysql_fetch_array($sql);

$i=1;

?>
<table cellpadding="0" cellspacing="0"><tr>
<td class="td1" width="30"><span class="td1_name"><input type="checkbox" name="checkboxall" onclick="return setCheckBox(this.checked);"></span></td>
<td class="td1" width="50"><span class="td1_name">№</span></td>
<td class="td1" width="300"><span class="td1_name">TITLE</span></td>
</tr></table>
<?
do
{
echo "<table cellpadding='0' cellspacing='0'><tr>
<td class='td2' width='30'><span class='td2_name'><input type='checkbox' name='page[]' value=$row[id]></span></td>
<td class='td2' width='50'><span class='td2_name'>"; echo $i++; echo"</td>
<td class='td2' width='300'><span class='td2_name'>$row[title]</span></td>
</tr></table>";     
}
while (@$row = mysql_fetch_array($sql));          
?></form>

Весь код:

<script type="text/javascript">
function setCheckBox(checked) {   
var checkbox = document.getElementsByTagName('input');
for(var i=0;i!=checkbox.length;i++) {
if (checkbox[i].type == 'checkbox') { 
checkbox[i].checked = checked;
}
}
return true;
}
</script>
<form name="index" action="index.php" method="post">    
<?
include_once("bd.php");
if (isset($delete)) 
{
$count = count($page);
for ($i=0; $i<$count; $i++)
{
$id = $page["$i"];
$sql = mysql_query("DELETE FROM articles WHERE id=$id");
if (!$res) echo mysql_error();
}
echo "<meta http-equiv=Refresh content='0; URL=index.php'>";
}       
echo "<input class='delete_input' name='delete' type='submit' value='Удалить'><br><br>";

$sql = mysql_query("select id, title from articles");                                             
@$row=mysql_fetch_array($sql);

$i=1;

?>
<table cellpadding="0" cellspacing="0"><tr>
<td class="td1" width="30"><span class="td1_name"><input type="checkbox" name="checkboxall" onclick="return setCheckBox(this.checked);"></span></td>
<td class="td1" width="50"><span class="td1_name">№</span></td>
<td class="td1" width="300"><span class="td1_name">TITLE</span></td>
</tr></table>
<?
do
{
echo "<table cellpadding='0' cellspacing='0'><tr>
<td class='td2' width='30'><span class='td2_name'><input type='checkbox' name='page[]' value=$row[id]></span></td>
<td class='td2' width='50'><span class='td2_name'>"; echo $i++; echo"</td>
<td class='td2' width='300'><span class='td2_name'>$row[title]</span></td>
</tr></table>";     
}
while (@$row = mysql_fetch_array($sql));          
?>
</form>

ШАГ ТРЕТИЙ. CSS. Файл стилей style.css.

Не забываем в index.php подключить файл стилей!

.delete_input
{
color: #ba55b7;
border: none;
background: none;
}

.td1
{
background: #badfff; 
border:1px solid #badfff;  
text-align: center;
}

.td2
{
border:1px solid #badfff;    
text-align: center;
}

.td1_name
{
color: #ba5f00;
}

.td2_name
{
color: #000000;    
}

Большое спасибо за внимание!

work_with_records_being_stored_in_a_database_delete

vk.com
Комментарии