jquery单选按钮问题

当你点击左边表单中的单选按钮时，这一行的数据就显示到右边表单中<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>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

每一个radio增加一个onclick事件，在事件发生时，取radio旁边你要选取的label的值，然后传给表单上的元素就可以了
根据你的结构写的，思路有了，代码不全，自己动脑继续写<html>
<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>
拿你的题练练手<head>
    <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>