当你点击左边表单中的单选按钮时,这一行的数据就显示到右边表单中<h2>8.在下列表格中任意点击一行的radio,把详细信息在右边的表单中显示出来(10分)</h2><table width=100% id="table">
<tr>
<td width=600>
<table width=600 border=1 id="tb8">
<thead>
<tr>
<th width=5%> </th>
<th width=15%>姓名</th>
<th width=15%>年龄</th>
<th width=15%>性别</th>
<th width=15%>学历</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>大专</td>
<td>篮球,足球,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>李四</td>
<td>33</td>
<td>女</td>
<td>本科</td>
<td>看书,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>王二</td>
<td>31</td>
<td>女</td>
<td>中专</td>
<td>看书</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>麻子</td>
<td>24</td>
<td>男</td>
<td>本科</td>
<td>看书,旅游,足球</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width=100% border=1 class="tb8">
<tr>
<td>姓名:</td><td><input type="text" class="name" /></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" class="age" /></td>
</tr>
<tr>
<td>性别:</td><td><input type="radio" class="sex" name="sex" value="男" />男<input type="radio" class="sex" name="sex" value="女" />女</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select class="edu" >
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="中专">中专</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td><td><input type="checkbox" class="hob" value="篮球" />篮球<input type="checkbox" class="hob" value="足球" />足球<input type="checkbox" class="hob" value="看书" />看书<input type="checkbox" class="hob" value="旅游" />旅游</td>
</tr>
</table>
</td>
</tr>
</table>
<script></script>
<tr>
<td width=600>
<table width=600 border=1 id="tb8">
<thead>
<tr>
<th width=5%> </th>
<th width=15%>姓名</th>
<th width=15%>年龄</th>
<th width=15%>性别</th>
<th width=15%>学历</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>大专</td>
<td>篮球,足球,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>李四</td>
<td>33</td>
<td>女</td>
<td>本科</td>
<td>看书,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>王二</td>
<td>31</td>
<td>女</td>
<td>中专</td>
<td>看书</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>麻子</td>
<td>24</td>
<td>男</td>
<td>本科</td>
<td>看书,旅游,足球</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width=100% border=1 class="tb8">
<tr>
<td>姓名:</td><td><input type="text" class="name" /></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" class="age" /></td>
</tr>
<tr>
<td>性别:</td><td><input type="radio" class="sex" name="sex" value="男" />男<input type="radio" class="sex" name="sex" value="女" />女</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select class="edu" >
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="中专">中专</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td><td><input type="checkbox" class="hob" value="篮球" />篮球<input type="checkbox" class="hob" value="足球" />足球<input type="checkbox" class="hob" value="看书" />看书<input type="checkbox" class="hob" value="旅游" />旅游</td>
</tr>
</table>
</td>
</tr>
</table>
<script></script>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(function(){
$targetSelects=$('.tb8 td:last-child')
$(':radio').click(function(){
var $curObj=$(this).parent('td').siblings();
$targetSelects.eq(0).children(':text').val($curObj.eq(0).text())
})
})</script>
</head>
<body>
<h2>8.在下列表格中任意点击一行的radio,把详细信息在右边的表单中显示出来(10分)</h2><table width=100% id="table">
<tr>
<td width=600>
<table width=600 border=1 id="tb8">
<thead>
<tr>
<th width=5%> </th>
<th width=15%>姓名</th>
<th width=15%>年龄</th>
<th width=15%>性别</th>
<th width=15%>学历</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=radio name="radio" /></td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>大专</td>
<td>篮球,足球,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td>李四</td>
<td>33</td>
<td>女</td>
<td>本科</td>
<td>看书,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td>王二</td>
<td>31</td>
<td>女</td>
<td>中专</td>
<td>看书</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td>麻子</td>
<td>24</td>
<td>男</td>
<td>本科</td>
<td>看书,旅游,足球</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width=100% border=1 class="tb8">
<tr>
<td>姓名:</td><td><input type="text" class="name" /></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" class="age" /></td>
</tr>
<tr>
<td>性别:</td><td><input type="radio" class="sex" name="sex" value="男" />男<input type="radio" class="sex" name="sex" value="女" />女</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select class="edu" >
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="中专">中专</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td><td><input type="checkbox" class="hob" value="篮球" />篮球<input type="checkbox" class="hob" value="足球" />足球<input type="checkbox" class="hob" value="看书" />看书<input type="checkbox" class="hob" value="旅游" />旅游</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
$(function(){
$(":radio[name='radio']").click(function(){
clear();
var $tr= $(this).parent("td").parent("tr");
$(".name").val($tr.find("td:eq(1)").text());
$(".age").val($tr.find("td:eq(2)").text());
$(".sex:[value='"+$tr.find("td:eq(3)").text()+"']").attr("checked",true);
$(".edu").val($tr.find("td:eq(4)").text());
var str = $tr.find("td:eq(5)").text().split(',');
for(var i=0;i<str.length;i++){
$(".hob:[value='"+str[i]+"']").attr("checked",true);
}
});
function clear(){
$(".name").val('');
$(".age").val('');
$(".sex").attr("checked",false);
$(".edu").val('');
$(".hob").attr("checked",false);
}
});
</script>
</head>
<body>
<table width=100% id="table">
<tr>
<td width=600>
<table width=600 border=1 id="tb8">
<thead>
<tr>
<th width=5%> </th>
<th width=15%>姓名</th>
<th width=15%>年龄</th>
<th width=15%>性别</th>
<th width=15%>学历</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=radio name="radio" /></td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>大专</td>
<td>篮球,足球,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td>李四</td>
<td>33</td>
<td>女</td>
<td>本科</td>
<td>看书,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td>王二</td>
<td>31</td>
<td>女</td>
<td>中专</td>
<td>看书</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td>麻子</td>
<td>24</td>
<td>男</td>
<td>本科</td>
<td>看书,旅游,足球</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width=100% border=1 class="tb8">
<tr>
<td>姓名:</td><td><input type="text" class="name" /></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" class="age" /></td>
</tr>
<tr>
<td>性别:</td><td><input type="radio" class="sex" name="sex" value="男" />男<input type="radio" class="sex" name="sex" value="女" />女</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select class="edu" >
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="中专">中专</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td><td><input type="checkbox" class="hob" value="篮球" />篮球<input type="checkbox" class="hob" value="足球" />足球<input type="checkbox" class="hob" value="看书" />看书<input type="checkbox" class="hob" value="旅游" />旅游</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<?DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>dynamicContent</title>
<style type="text/css"> </style></head>
<body>
<h2>8.在下列表格中任意点击一行的radio,把详细信息在右边的表单中显示出来(10分)</h2><table width=100% id="table">
<tr>
<td width=600>
<table width=600 border=1 id="tb8">
<thead>
<tr>
<th width=5%> </th>
<th width=15%>姓名</th>
<th width=15%>年龄</th>
<th width=15%>性别</th>
<th width=15%>学历</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>张三</td>
<td>20</td>
<td>男</td>
<td>大专</td>
<td>篮球,足球,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>李四</td>
<td>33</td>
<td>女</td>
<td>本科</td>
<td>看书,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>王二</td>
<td>31</td>
<td>女</td>
<td>中专</td>
<td>看书</td>
</tr>
<tr>
<td><input type=radio name="radio" onclick="show_selected_item_val(this)"/></td>
<td>麻子</td>
<td>24</td>
<td>男</td>
<td>本科</td>
<td>看书,旅游,足球</td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="infoTb" width=100% border=1 class="tb8">
<tr>
<td>姓名:</td><td><input type="text" name="name" class="name" /></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" name="age" class="age" /></td>
</tr>
<tr>
<td>性别:</td><td><input type="radio" class="sex" name="sex" value="男" />男<input type="radio" class="sex" name="sex" value="女" />女</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="edu" class="edu" >
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="中专">中专</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td><td><input type="checkbox" name="hob" class="hob" value="篮球" />篮球<input type="checkbox" name="hob" class="hob" value="足球" />足球<input type="checkbox" name="hob" class="hob" value="看书" />看书<input type="checkbox" name="hob" class="hob" value="旅游" />旅游</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
function show_selected_item_val(obj){
var info = ["name","age","sex","edu","hob"];
var infoContent = {};
if(obj.checked){
obj = obj.parentNode ||obj.parentElement;
var infoObj = obj.nextSibling;
for(var i = 0;i < info.length;i ++,infoObj = infoObj.nextSibling){
infoContent[info[i]] = infoObj.innerHTML;
}
var infoTb = document.getElementById("infoTb");
for(var o in infoContent){
switch(o){
case "name":
var nameInput = document.getElementsByName(o)[0];
nameInput.value = infoContent[o];
break;
case "age":
var ageInput = document.getElementsByName(o)[0];
ageInput.value = infoContent[o];
break;
case "sex":
var sexRadio = document.getElementsByName(o);
for(var p = 0;p < sexRadio.length;p ++){
if(sexRadio[p].value == infoContent[o]){
sexRadio[p].checked = true;
}
}
break;
case "edu":
var eduSelect = document.getElementsByName(o)[0];
eduSelect.value = infoContent[o];
break;
case "hob":
var hobCheckbox = document.getElementsByName(o);
for(var p = 0;p < hobCheckbox.length;p ++){
if(infoContent[o].indexOf(hobCheckbox[p].value) > -1){
hobCheckbox[p].checked = true;
}
}
break;
default:break;
}
}
}
} </script>
</body>
</html>
<title>Test</title>
</head>
<body>
<table width=100% id="table">
<tr>
<td width=600>
<table width=600 border=1 id="tb8">
<thead>
<tr>
<th width=5%> </th>
<th width=15%>姓名</th>
<th width=15%>年龄</th>
<th width=15%>性别</th>
<th width=15%>学历</th>
<th>兴趣爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=radio name="radio" /></td>
<td class="name">张三</td>
<td class="age">20</td>
<td class="sex">男</td>
<td class="edu">大专</td>
<td class="hob">篮球,足球,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td class="name">李四</td>
<td class="age">33</td>
<td class="sex">女</td>
<td class="edu">本科</td>
<td class="hob">看书,旅游</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td class="name">王二</td>
<td class="age">31</td>
<td class="sex">女</td>
<td class="edu">中专</td>
<td class="hob">看书</td>
</tr>
<tr>
<td><input type=radio name="radio" /></td>
<td class="name">麻子</td>
<td class="age">24</td>
<td class="sex">男</td>
<td class="edu">本科</td>
<td class="hob">看书,旅游,足球</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width=100% border=1 class="tb8">
<tr>
<td>姓名:</td><td><input type="text" class="name" /></td>
</tr>
<tr>
<td>年龄:</td><td><input type="text" class="age" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" class="sex" value="男" />男
<input type="radio" class="sex" value="女" />女
</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select class="edu" >
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="中专">中专</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" class="hob" value="篮球" />篮球
<input type="checkbox" class="hob" value="足球" />足球
<input type="checkbox" class="hob" value="看书" />看书
<input type="checkbox" class="hob" value="旅游" />旅游
</td>
</tr>
</table>
</td>
</tr>
</table>
<script>
function getValue(elem){
var values = {},
tds = elem.children;
for(var i in tds){
var td = tds[i],
key = td.className;
if(key){
values[key] = td.textContent ? td.textContent : td.innerText;
}
}
return values;
}
function setValue(elem, data){
for(var i in data){
var inputs = elem.getElementsByTagName('input'),
selectors = elem.getElementsByTagName('select'),
value = data[i];
for(var j in inputs){
var el = inputs[j];
if(el.className === i){
if(el.type === 'text'){
el.value = value;
}else if(el.type === 'radio'){
if(el.value === value){
el.checked = true;
}else{
el.checked = false;
}
}else if(el.type === 'checkbox'){
var vals = value.split(',');
el.checked = false;
for(var k in vals){
var val = vals[k];
if(el.value === val){
el.checked = true;
}
}
}
}
}
for(var j in selectors){
var selector = selectors[j],
opts = selector.children;
for(var k in opts){
if(opts[k].value === value){
selector.selectedIndex = k;
}
}
}
}
}
var tab = document.getElementById('table'),
tabs = tab.getElementsByTagName('table'),
tab1 = tabs[0],
tab2 = tabs[1],
tab2_trs = tab2.getElementsByTagName('tr');
values = [];
tab1.onclick = function(event){
var target = event ? event.target : window.event.srcElement;
if(target.tagName === "INPUT" && target.type === 'radio'){
var parent = target.parentNode,
tr = parent.parentNode;
var values = getValue(tr);
setValue(tab2, values);
}
}
</script>
</body>
</html>