Добрый день, есть вот такой код привожу вместе с css:
<!DOCTYPE HTML html public "-//W3C//DTD HTML 5 Transitional//EN">
<html>
<head>
<title>form</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="class1.css">
<style type="text/css">
.base{height: 20px;
width:50px;
border: 1px solid black;
text-align: left;}
.s1{font-size: 80%}
select[name="group"]{height: 20px;
width:150px;
text-align: left;}
.add{height: 20px;
width:50px;
text-align: center;
border-right: 1px solid black;}
.ext{height: 20px;
width:50px;
text-align: left;
border-right: 1px solid black;
border-left: 1px solid black;}
input[type="text"]{width:80px;}
select[name="trainer"]{height: 20px;
width:100px;
text-align: left;}
select[name="weekday"]{height: 20px;
width:80px;
text-align: left;}
select[name="classroom"]{height: 20px;
width:60px;
text-align: center;}
select[name="from"]{height: 20px;
width:50px;}
select[name="till"]{height: 20px;
width:50px;}
.fbase{height: 20px;
width:50px;}
.end{height: 20px;
width:50px;
border-right: 1px solid black;
border-bottom: 1px solid black;}
.ext1{height: 20px;
width:50px;
text-align: right;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;}
.fbase{height: 20px;
width:50px;}
</style>
</head>
<body>
<table cellSpacing='0' cellPadding='0'>
<thead>
<tr><th class="base" colspan="10" rowspan="2"><span class="s1">Group <select name="group"></select></span><br><span class="s1"><input type="checkbox"> Separate data for each Module</span></th></tr>
<tr></tr>
</thead>
<tbody>
<tr>
<td class="base" colspan="3" rowspan="3">
<span class="s1">jd01</span><br>
<span class="s1">jd02</span><br>
<span class="s1">jd03</span>
</td>
<td class="base" colspan="7">
<span class="s1">Intramural classes</span>
</td>
</tr>
<tr>
<td class="add" colspan="2" rowspan="2">
<span class="s1">Weekdays</span>
</td>
<td class="add" colspan="3" rowspan="2">
<span class="s1">Timing</span>
</td>
<td class="add" rowspan="2">
<span class="s1">Classroom</span>
</td>
<td class="add" rowspan="2">
<span class="s1">Academic hours</span>
</td>
</tr>
<tr></tr>
<tr>
<td class="ext" colspan="3"><span class="s1">Trainer <select name="trainer"></select></span></td>
<td class="add" colspan="2">
<span><select name="weekday"></select></span>
</td>
<td class="add" colspan="3">
<span class="s1">from <select name="from"></select> till <select name="till"></select></span>
</td>
<td class="add">
<span class="s1"><select name="classroom"></select></span>
</td>
<td class="add">
<span></span>
</td>
</tr>
<tr>
<td class="ext" colspan="3"><span class="s1">Start date <input type="text" name="date" value="" pattern="" placeholder="dd.mm.yyyy" required></span></td>
<td class="add" colspan="2">
</td>
<td class="add" colspan="3">
</td>
<td class="add">
</td>
<td class="add">
</td>
</tr>
<tr>
<td class="ext1" colspan="3"><span class="s1" ><input type="button" value="Submit" class="btn btn-success"></span></td>
<td class="end" colspan="2">
<span class="s1"><a href="#">+Add weekdays</a></span>
</td>
<td class="end" colspan="3">
</td>
<td class="end">
</td>
<td class="end">
</td>
</tr>
<tr><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td><td class="fbase"></td></tr>
</tbody>
</table>
</body>
</html>
Суть вопроса: необходимо, чтобы по нажатию Add weekdays в пустую строку дублировалась часть строки выше(выпадающие списки), а следующие нажатия добавляли новые строки с дублированием строки выше. Строка, которая должна добавляться вот:
<tr>
<td class="ext" colspan="3"></td>
<td class="add" colspan="2">
<span><select name="weekday"></select></span>
</td>
<td class="add" colspan="3">
<span class="s1">from <select name="from"></select> till <select name="till"></select></span>
</td>
<td class="add">
<span class="s1"><select name="classroom"></select></span>
</td>
<td class="add">
<span></span>
</td>
</tr>
У кого есть идеи, буду очень признателен!!!!