Если вам нужно сделать таблицу с автозаполнением полей для печати, то в случае веб-реализации вам нужно не начальные, а уверенные знания JavaScript.
Вот примерно так можно это сделать.
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=utf-8'>
</head>
<body>
<style>
html, body
{
margin: 0;
padding: 0;
}
table
{
border-collapse: collapse;
background-color: #fff;
}
table,
table td,
table th
{
border: 1px solid #333;
}
</style>
<table id="job_briefing">
<tr><th>Работник</th><th>Должность</th><th>Дата инструктажа</th><th>Инструкция</th><th>Подпись</th></tr>
</table>
<script>
(function()
{
var row_count = 30; // количество строк таблицы
var inctruct_info = '№18 от 01.07.2015'; // номер инструкции, которая будет заполнятся автоматически
// справочник работников
var workers =
[
{
name: 'Иванов И.А.',
post: 'Водитель'
},
{
name: 'Петров И.А.',
post: 'Техник'
},
{
name: 'Сидоров И.А.',
post: 'Инженер'
},
];
var job_briefing_table = document.getElementById('job_briefing'); // получаем DOM-элемент со страницы
for(var i = 0; i < row_count; i++)
job_briefing_table.appendChild(create_table_row()); // наполняем строками
// функция создания строки
function create_table_row()
{
var tr_elem = document.createElement('tr'); // создаем элемент tr
var td_elem = document.createElement('td'); // создаем элемент td
td_elem.appendChild(create_select(workers)); // создаем элемент select и вставялем его в td
tr_elem.appendChild(td_elem); // вставляем td в tr
for(var i = 0; i < 4; i++) // создаем и вставляем остальные td
{
td_elem = document.createElement('td');
tr_elem.appendChild(td_elem);
}
return tr_elem;
}
// функция создания выпадающего списка с работниками
function create_select(workers /* - список работников*/)
{
var select_elem = document.createElement('select'); // содаем элемент select
var worker_count = workers.length; // определяем кол-во работников в списке
var option_elem = document.createElement('option'); // создаем элемент option
option_elem.setAttribute('value', -1); // добавляем в option атрибут value для пустого элемента
select_elem.appendChild(option_elem); // вставляем option в select
for(var i = 0; i < worker_count; i++) // перебираем список работников
{
var worker = workers[i]; // текущий элемент списка работников
option_elem = document.createElement('option');
option_elem.setAttribute('value', i); // добавляем в option атрибут value = порядковый номер работника в списке
option_elem.innerHTML = worker.name; // имя работника в option
select_elem.appendChild(option_elem); // вставляем option в select
}
select_elem.onchange = worker_select_onchange; // добавляем обработчик события выбора элемента в выпадающем списке работников
return select_elem; // возвращаем готовый элемент выпадающего списка
}
// обработчик события выбора элемента в выпадающем списке работников
function worker_select_onchange(e)
{
var target = e.target; // получаем то элемент select, на котором произошло событие выбора работника
var select_value = target.value; // получаем выбранное value - порядковый номер работника
var tr_elem = target.parentNode.parentNode; // получаем строку, на котором располагается select (второй родительский элемент)
var td_elems = tr_elem.getElementsByTagName('td'); // получаем все ячейки этой строки
td_elems[1].innerHTML = select_value == -1 ? '' : workers[select_value].post; // задаем должность для 2-ой ячейки
td_elems[2].innerHTML = select_value == -1 ? '' : get_current_date(); // задаем текущую дату для 3-ей ячейки
td_elems[3].innerHTML = select_value == -1 ? '' : inctruct_info; // задаем сведения об инструкции для 4-ой строки
}
// функция получения текущей даты по формату DD.MM.YYYY
function get_current_date()
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
return (day < 10 ? '0' : '') + day + '.' + (month < 10 ? '0' : '') + month + '.' + date.getFullYear();
}
})();
</script>
</body>
</html>