deatlink,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('select'),
tr = document.querySelectorAll('tr'),
mydiv = document.querySelectorAll('.mydiv');
function d() {
var i = +select.value;
[].forEach.call( tr[i].querySelectorAll('td:nth-child(n+3)'), function(td,i) {
mydiv[i].innerHTML = td.textContent
});
}
select.addEventListener('change', d);
d();
});
</script>
</head>
<body>
<table>
<tr>
<td>ID</td><td>Color</td><td>Job</td><td>ID</td>
</tr>
<tr>
<td>1</td><td>green</td><td>master</td><td>63hr</td>
</tr>
<tr>
<td>2</td><td>red</td><td>programmer</td><td>7fgdg</td>
</tr>
<tr>
<td>3</td><td>yellow</td><td>designer</td><td>74ythg</td>
</tr>
</table>
<select>
<option value="1">green</option>
<option value="2">red</option>
<option value="3">yellow</option>
</select><br>
Job: <span class="mydiv"></span><br>
ID: <span class="mydiv"></span>
</body>
</html>
|