За последние 24 часа нас посетили 17973 программиста и 1612 роботов. Сейчас ищут 957 программистов ...

подстановка данных из таблицы в инпуты по клику

Тема в разделе "JavaScript и AJAX", создана пользователем den.otto, 13 май 2012.

  1. den.otto

    den.otto Активный пользователь

    С нами с:
    12 май 2012
    Сообщения:
    4
    Симпатии:
    0
    Доброго времени суток! дело в следующем:
    есть форма:

    <form method="post" name="vvod">
    Отдел: <select name="otdel">
    <option value="Заместитель начальника ЦРИТ">Заместитель начальника ЦРИТ</option>
    <option value="Сетевого администрирования">Сетевого администрирования</option>
    <option value="Ремонта и обслуживания выч. и оргтехники">Ремонта и обслуживания выч. и оргтехники</option>
    <option value="Информационных технологий и мультимедиа систем">Информационных технологий и мультимедиа систем</option>
    <option value="Дистанционного обучения">Дистанционного обучения</option>
    <option value="Электронных документов">Электронных документов</option>
    <option value="Web-программирования">Web-программирования</option>
    </select><br>
    Дата добавления: <input type="text" name="dat_dob"> <br>
    Дата истечения: <input type="text" name="dat_ist"> <br>
    Текст:<br>
    <textarea name="text" cols="100" rows="10">
    </textarea>
    <input type="submit" name="dogo2" value="Добавить"><input type="reset" value="Очистить">
    </form>
    в нее вводятся данные, которые по нажатию на кнопку "добавить" вносятся в БД. сразу за формой на этой же странице осуществляется вывод данных из БД в виде таблицы:

    $result = mysql_query("SELECT * FROM zadanie ");
    $n=mysql_num_rows($result);
    echo "<p><table border=1>\n";

    while ($myrow = mysql_fetch_row($result))
    {
    printf("<tr><td>%s </td><td>%s </td><td>%s</td><td>%s</td></tr>\n", $myrow[1], $myrow[2], $myrow[3], $myrow[4]);
    }
    echo "</table>\n</p>";

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

    Точно знаю, что реализовать это можно с помощью js, но знания мои в нем пока невелики... может нужно как-то переделать вывод? прошу помощи знатоков!)
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Есть скриптовая библиотека JQuery, с помощью которой будет легко осуществить задуманное.
    Можно с помощью jquery вешать обработчики событий на html элементы, например, событие клика. По клику будет вызвана функция и данные из таблицы или массива будут помещены в форму.
    Тут о том, как создавать обработчик клика.
    Тут и тут о том, как брать и помещать данные в элементы формы.
    Информация о селекторах, если хотите выбирать данные прямо из таблицы. Можно через PHP вывести JS массив и по клику помещать данные в форму из массива, если не хочется в селекторах разбираться.
     
  3. den.otto

    den.otto Активный пользователь

    С нами с:
    12 май 2012
    Сообщения:
    4
    Симпатии:
    0
    спасибо! буду пробовать разбираться...
     
  4. den.otto

    den.otto Активный пользователь

    С нами с:
    12 май 2012
    Сообщения:
    4
    Симпатии:
    0
    ничего не выходит! народ, призываю к помощи
     
  5. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    не может быть

    Добавлено спустя 10 минут 18 секунд:
    Вот ваша форма. В неё добавил id="vvod", чтобы легче находить в документе
    Код (Text):
    1. <form method="post" name="vvod" id="vvod">
    2. Отдел: <select name="otdel">
    3. <option value="Заместитель начальника ЦРИТ">Заместитель начальника ЦРИТ</option>
    4. <option value="Сетевого администрирования">Сетевого администрирования</option>
    5. <option value="Ремонта и обслуживания выч. и оргтехники">Ремонта и обслуживания выч. и оргтехники</option>
    6. <option value="Информационных технологий и мультимедиа систем">Информационных технологий и мультимедиа систем</option>
    7. <option value="Дистанционного обучения">Дистанционного обучения</option>
    8. <option value="Электронных документов">Электронных документов</option>
    9. <option value="Web-программирования">Web-программирования</option>
    10. </select><br>
    11. Дата добавления: <input type="text" name="dat_dob"> <br>
    12. Дата истечения: <input type="text" name="dat_ist"> <br>
    13. Текст:<br>
    14. <textarea name="text" cols="100" rows="10">
    15. </textarea>
    16. <input type="submit" name="dogo2" value="Добавить"><input type="reset" value="Очистить">
    17. </form>
    Где-нибудь в верху документа подключите JQuery
    Код (Text):
    1. <head>
    2. <meta charset="UTF-8" />
    3. <title>my first page</title>
    4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    5. </head>
    или с локальной копии, если не всегда в сети
    Код (Text):
    1. <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    Там же или в теле документа добавьте скрипт
    Код (Text):
    1. <script>
    2. $(document).ready(function(){
    3.   $('#activeTable td').click(function(){
    4.     var cells=$(this).parent('tr').children('td');
    5.     $('#vvod :input[name="otdel"]').val($(cells[0]).text().trim());
    6.     $('#vvod :text[name="dat_dob"]').val($(cells[1]).text().trim());
    7.     $('#vvod :text[name="dat_ist"]').val($(cells[2]).text().trim());
    8.     $('#vvod :input[name="text"]').val($(cells[3]).text().trim());
    9.   });
    10. });
    11. </script>
    Таблице, в которой выводится список, тоже дайте id
    Код (PHP):
    1. echo "<table border=1 id='activeTable'>\n";
    2. while ($myrow = mysql_fetch_row($result)){
    3. printf("<tr><td>%s </td><td>%s </td><td>%s</td><td>%s</td></tr>\n", $myrow[1], $myrow[2], $myrow[3], $myrow[4]);
    4. }
    5. echo "</table>\n"; 
    Добавлено спустя 4 минуты 32 секунды:
    В браузерах Файрефокс, Хром, Опера, Сафари, ИнтернетЭксплорер работает.
    Только в 7 версии ИЭ, кажется, нет.
     
  6. den.otto

    den.otto Активный пользователь

    С нами с:
    12 май 2012
    Сообщения:
    4
    Симпатии:
    0
    спасибо за помощь! походу разобрался, все работает...