<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>调查问卷</title> <link href="css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(function (){ $("#tiaojjiao").bind("click",function(){ var joson = []; var answer = []; $("input:checked").add("textarea").each(function (i){ if(i==0){ joson.push("{"+$(this).attr("name")+":'"+$(this).val()+"'"); }else{ if($(this).attr("name")=="answer"){ answer.push($(this).val()); }else{ joson.push($(this).attr("name")+":'"+$(this).val()+"'"); } } }); joson.push("answer"+":'"+answer+"'}"); var obj = eval("("+joson+")"); $("#show").append("<tr><td>"+obj.sex+"</td><td>"+obj.education+"</td><td>"+obj.age+"</td><td>"+obj.answer+"<br/>"+obj.answerTxt+"</td></tr>"); window.scrollBy(0,-600) }); }); </script> //第二种写法 调用serializeArray直接返回json对象 <script> $(function (){ $("#tiaojjiao").bind("click",function(){ var fields = $("input:checked,textarea").serializeArray(); jQuery.each( fields, function(i, field){ $("#show").append("<tr><td>"+field.name+"</td><td>"+field.value+"</td></tr>"); }); window.scrollBy(0,-600) }); }); </script> </head> <body style="text-align:center"> <div style="background-color:#F2F4FF"> 选择的结果: <table id="show"> <tr> <th>性别</th><th>学历</th><th>年龄</th><th>薪酬标准的确定和变动关联因素</th> </tr> </table> </div> <div class="two"> <div class="three"><h3>1、您的性别?</h3> <div class="four"><input id="abc1_1" type="radio" name="sex" value="男" />男</div> <div class="four"><input id="abc1_2" type="radio" name="sex" value="女" />女</div> </div> <div class="three"><h3>2、您的受教育程度?</h3> <div class="four"><input id="abc2_1" type="radio" name="education" value="硕士或硕士以上" />硕士或硕士以上</div> <div class="four"><input id="abc2_2" type="radio" name="education" value="本科" />本科</div> <div class="four"><input id="abc2_3" type="radio" name="education" value="大专" />大专</div> <div class="four"><input id="abc2_4" type="radio" name="education" value="大专以下" />大专以下</div> </div> <div class="three"><h3>3、您的年龄是?</h3> <div class="four"><input id="abc3_1" type="radio" name="age" value="25岁(含)及以下" />25岁(含)及以下</div> <div class="four"><input id="abc3_2" type="radio" name="age" value="26岁--35岁(含)" />26岁--35岁(含)</div> <div class="four"><input id="abc3_3" type="radio" name="age" value="36岁--45岁(含)" />36岁--45岁(含)</div> <div class="four"><input id="abc3_4" type="radio" name="age" value="46岁以上" />46岁以上</div> </div> <div class="three" ><h3>4、您认为薪酬标准的确定和变动应该与哪些因素关联度最高?(多选题)</h3> <div class="four"><input id="abc26_1" type="checkbox" name="answer" value="学历" />学历</div> <div class="four"><input id="abc26_2" type="checkbox" name="answer" value="岗位价值" />岗位价值</div> <div class="four"><input id="abc26_3" type="checkbox" name="answer" value="工作年限" />工作年限</div> <div class="four"><input id="abc26_4" type="checkbox" name="answer" value="工作经验、工作资历" />工作经验、工作资历</div> <div class="four"><input id="abc26_5" type="checkbox" name="answer" value="工作业绩" />工作业绩</div> <div class="four"><input id="abc26_6" type="checkbox" name="answer" value="工作绩效" />工作绩效</div> <div class="four"><input id="abc26_7" type="checkbox" name="answer" value="工作绩效" />技能水平</div> <div class="four"><input id="abc26_8" type="checkbox" name="answer" value="工作环境" />工作环境</div> <div class="four"><input id="abc26_9" type="checkbox" name="answer" value="工作时间" />工作时间</div> <div class="four"><h3>其 他:</h3> <textarea name="answerTxt" type="text" ></textarea> </div> <input type="button" id="tiaojjiao" value="提 交" /> </div> </div> </body> </html> <style type="text/css"> table { border: 1px solid #B1CDE3; padding:0; margin:0 auto; border-collapse: collapse; } td,th { border: 1px solid #B1CDE3; background: #fff; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; } </style>
<注意>:如果从头部插入的话 用:prepend() 方法