我想用jquery或者JS实现这样一个功能怎么实现！求大神

jqueryjavascriptWeb

解决方案 »

  1.   

    这是右面的jsp相关源码，
    <script type="text/javascript">
    $(document).ready(function(e) 
    {
    $(".select3").uedSelect({
    width :70
    });
    });
    function peopleSearch()
    {
    if(($('#pid').val()==null||$('#pid').val()=="")&&($('#pname').val()==null||$('#pname').val()==""))
    {
    alert("姓名/证件号码不可同时为空!");
    return ;
    }
    var $form  = $('#form1');
       $form.attr("action","<%=request.getContextPath()%>/peopleSearch.action");
       $("#tbody1").empty();
       $.ajax({
                  type:'POST',
                  url:$form.attr("action"),
                  data:$form.serializeArray(),
      dataType:"json",
      cache: false,
      success: function(json)
      {
    var objArray = json.data; 
    var data = eval(objArray);  
    if(data!=null)
    {
    for(var i=0;i<data.length;i++)
    {
    var tmp='<tr>';
    tmp +='<td><input type="radio"/></td>';
    tmp +='<td>'+data[i].name+'</td>';
    tmp +='<td>'+data[i].card_type+'</td>';
    tmp +='<td>'+data[i].id_card+'</td>';
        tmp +='<td>'+data[i].sex+'</td>';
      tmp +='</tr>'
             $('#tbody1').append(tmp);
    }     
    }
      },
      error:function()
      {
     alert("服务器连接失败");
      }
              });
    }
    </script>
    <style>
    body{min-width:400px;}
    .select tr{border:solid 1px #cbcbcb;}
    .select table{border:solid 1px #cbcbcb; width:100%; clear:both;}
    .selecttd{line-height:35px;  border-right: dotted 1px #c7c7c7; text-align:center;}
    </style>
    </head><body>
        <div class="formbody">
        <div id="usual1" class="usual"> 
        
        <div class="itab">
       <ul> 
        <li><a href="#tab1" class="selected">人员查询</a></li> 
        <li><a href="#tab2">自定义</a></li> 
       </ul>
        </div>    <div id="tab1" class="tabson">
           <form id="form1" action="#">
          <table class="select">
           <tr class="selecttd">
            <td class="selecttd" width="15%" >证件类型</td>
            <td class="selecttd" > 
            <div class="vocation" style=" height:32px;">
            <select name="searchp.card_type" class="select3">
        <option value="0">全部</option>
        <option value="1">其他</option>
        </select>
    </div>
        </td>
        <td class="selecttd" width="25%">证件号码</td>
            <td class="selecttd" width="40%" ><input name="searchp.id_card" id="pid" type="text" class="scinput" />
        </td>
            </tr>
            <tr class="selecttd">
            <td class="selecttd">姓名</td>
            <td class="selecttd"><input name="searchp.name" id="pname" type="text" class="dfinput" style="width:100%"/></td>
            <td  colspan=2 align=right><input type="button" class="scbtn" id="quick" value="查询" onclick="peopleSearch()" /></td>
            </tr>
    </table>
    </form>
       <table class="tablelist">
         <thead>
         <tr>
            <th>选取</th>
            <th>姓名</th>
            <th>证件类型</th>
            <th>证件号码</th>
            <th>性别</th>
            </tr>
            </thead>
            <tbody id="tbody1">
    </tbody>
        </table>
        </div> 
       <div id="tab2" class="tabson">
        </div>      
    </div> 
    <script type="text/javascript"> 
          $("#usual1 ul").idTabs(); 
        </script>
        <script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
    </script>
        </div>
    </body>
    </html>
      

  2.   

    ajax提交是分同步和异步两种情况的，只有在同步的情况下，ajax返回的结果才能立马被之后的javascript调用
      

  3.   

    这个简单，可惜我JSP还不会啊。
      

  4.   

    我觉得JS 和jquery完全能实现，只不过我的方法可能不对，求教
      

  5.   

    $.ajax({
                  type:'POST',
                  url:$form.attr("action"),
                  data:$form.serializeArray(),
      dataType:"json",
      cache: false,
      success: function(json)
    {
         $("#你需要赋值的ID").val()=""'
    }
    }