1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<style>
</style>
<script>
'use strict';
document.addEventListener( 'DOMContentLoaded', ev => {
}, false );
window.addEventListener( 'load', ev => {
document.querySelector( "#btnRemove" ).addEventListener( 'click', ev => {
const
tbody = document.querySelector( "#tab > tbody" );
let
row,
cells;
for( let n = 0; n < tbody.rows.length; n++ ){
row = tbody.rows[ n ];
cells = row.cells;
if ( ( n + 1 < tbody.rows.length ) && ( n % 2 === 0 ) ){
// rowSpan 2 pour cell 1
tbody.rows[ n + 1 ].deleteCell( 1 );
cells[ 1 ].rowSpan = 2;
// rowSpan 2 pour cell 3
tbody.rows[ n + 1 ].deleteCell( 3 );
cells[ 3 ].rowSpan = 2;
}
}
}, false );
}, false );
</script>
</head>
<body>
<main>
<table border="1" id="tab" style="background-color:#f0f7f6">
<colgroup>
<col width="210"/>
<col width="300"/>
<col width="300"/>
<col width="300"/>
<col width="300"/>
<col width="300"/>
</colgroup>
<thead>
<tr>
<!-- if checkbox is checked, clone school subjects to the whole table row -->
<th></th>
<th style="color:#444;background-color:#e0e0e0;text-align:center">lundi</th>
<th style="color:#444;background-color:#e0e0e0;text-align:center">mardi</th>
<th style="color:#444;background-color:#e0e0e0;text-align:center">mercredi</th>
<th style="color:#444;background-color:#e0e0e0;text-align:center">jeudi</th>
<th style="color:#444;background-color:#e0e0e0;text-align:center">vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" id="td1" style="color:#444;background-color:#e0e0e0;height:15px;font-size:12px;font-weight:bold;text-align:center">8:00</td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
</tr>
<tr>
<td valign="top" id="td2" style="color:#444;background-color:#e0e0e0;height:15px;font-size:12px;font-weight:bold;text-align:center">9:00</td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
</tr>
<tr>
<td valign="top" id="td3" style="color:#444;background-color:#e0e0e0;height:15px;font-size:12px;font-weight:bold;text-align:center">9:30</td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
</tr>
<tr>
<td valign="top" id="td4" style="color:#444;background-color:#e0e0e0;height:15px;font-size:12px;font-weight:bold;text-align:center">11:00</td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
<td valign="top" ></td>
</tr>
</tbody>
</table>
<br>
<button id="btnRemove">Remove Cell 24</button>
</main>
</body>
</html> |
Partager