DIV CSS 佈局教程網

jquery AJax修改和無刷新分頁。工作筆記：
文件一：

<div>
<p style="padding-bottom:10px;"> 請選擇類型
<input type="radio" name="stockType" value="spot" onclick="$('#supplyer').slideUp('slow');
$('#choseSpl').hide();" checked="checked"/> 類型一
<input type="radio" name="stockType" value="spot" onclick="dispSuply('in')" />
類型二 <input type="radio" name="stockType" value="spot" onclick="dispSuply('out')"/>
<input type="hidden" id="sstype" value="">
類型三<input name="splyer" type="hidden" value="" id="splyer"/></p>
</div>
 
<!--加載頁面二-->
<include file="gonyinshan" />
<script type="text/Javascript">
//選擇供應商
 
function selSuply(obj)
{
$('#choseSpl').show();
$('#choseSpl').Html('<b>您選擇的供應商是</b>&nbsp;>> '+$(obj).val());
$('#splyer').val($(obj).attr('id'));
$('#supplyer').slideUp();
 
}
 
//AJax顯示供應商列表
function dispSuply(country)
{
$('#sstype').val(country);
$('#supplyer').slideDown('slow');
$(".suptitle a").removeClass('hover');
$("#"+country).addClass("hover");
$(".scrollH").load('/member.PHP/Stock/gyslist/c/'+country);
 
//$.post('{:url("supplIErlist")}',
 
{c:country},function(data){
//        $('.listSpl').remove();
//        
 
$('#sTr').after(data);
//
//    });
 
}
</script>

文件二：

<script type="text/Javascript">
$(function(){
$(".suptitle a").click(function(){
$(".suptitle a").removeClass('hover');
$(this).addClass("hover");
$(".scrollH").load('/member.PHP/Stock/gyslist/c/'+$(this).attr('id'));
});
$("input[name='gysse']").click(function(){
$(".suptitle a").removeClass('hover');
$(".scrollH").load('/member.PHP/Stock/gyslist/k/'+$('#k').val());
})
})
 
</script>
 
<div id="supplyer">
<div class="supT">
<span class="suptitle">
<a href="javascript:;" class="hover" onfocus="this.blur()" id="in">國內供應商</a>
<a href="Javascript:;" onfocus="this.blur()" id="out">國際供應商
 
</a>
</span>
 
供應商列表： <a href="Javascript:;" onclick="alertinfo('alertdiv')" style="color:#0066CC; margin-right:30px;">添加新供應商
 
</a>
供應商搜索：<input id="k" type="text" /><input name="gysse" type="button" value="搜索"/>
<span onclick="$('#supplyer').slideUp();" 
 
class="close">關閉</span>
</div>
 
<div class="scrollH">
 
</div>
</div>

文件三：

<script type="text/Javascript">
$(function(){
$(".listSpl input[type='text']").click(function(){
$("#newvalue").val($(this).val());
$(this).parent('td').addClass('tdborder');
});
$("select[name='suptype']").focus(function(){
$("#newvalue").val($(this).val());
});
 
$(".listSpl input[type='text'],select[name='suptype']").blur(function(){
$(this).parent('td').removeClass('tdborder');
var newvalue = $.trim($(this).val());
if(newvalue != $("#newvalue").val())
{
var idValue = $(this).attr('id');
arr = idValue.split('/');
var id = arr[1];
var fd = arr[0];
$(this).after($('#AJaxAffect'));
$('#AJaxAffect').fadeIn();
$.post('/member.PHP/Stock/supedit',{id:id,fld:fd,newval:newvalue},function(data){
if($.trim(data) == 'success')
{
var myImg = '修改成功！';
 
}
else
{
var myImg = '<img src="/Public/images/icon/reg3.gif" alt="" />修改失敗！';
return false;
}
 
$('#AJaxAffect').Html(myImg);
});
if($(this).attr('name') == 'suptype')
{
$(this).parents('tr').remove();
}
 
setTimeout("$('#AJaxAffect').fadeOut()",1500);
}
});
 
//分頁連接替換加綁定onclick重新載
 
入事件
$.each(jQuery.makeArray($(".pages a")),function(i,n){
n = n.toString();
$(".pages a").eq(i).attr('href','Javascript:;');
$(".pages a").eq(i).attr('rel',n);
 
});
$(".pages a").bind('click',function(){
$(".scrollH").load($(this).attr('rel'));
});
})
 
</script>
<style 
 
type="text/CSS">
.listSpl input{border:1px #ffffff solid; overflow:hidden}
 
</style>
<div id="result"></div>
<div id="ajaxAffect"><img name="" src="__PUBLIC__/images/AJax-loader.gif" alt="" /></div>
<?php if($_GET['k']) echo '<font color=red>以下為搜索結果</font>'; ?>
<table border="0" width="100%" align="left" cellspacing="1" bgcolor="#FF9933" id="tableflow">
<tr valign="middle" id="sTr">
<td width="4%" align="center">選擇</td>
<td width="10%">供應商名稱</td>
<td width="10%">供應商類型</td>
<td width="10%">供應商公司地址</td>
<td width="10%">櫃台地址</td>
<td width="10%">聯系電話</td>
<td width="10%">傳真</td>
<td width="10%">QQ</td>
<td width="10%">email</td>
<td width="10%">MSN</td>
<td width="5%">聯系人</td>
</tr>
<iterate name="supplIEr" id="Slist">
<tr class="listSpl" style="background-color:#ffffff">
<?PHP $style1 = ($Slist->supply_type=='0')? 'selected':' ';
$style2 = ($Slist->supply_type=='1')? 'selected':' ';
?>
<td><input name="sComp" type="radio" value="{$Slist.supply_name}" id="{$Slist.supply_id}"  onclick="selSuply(this);"/></td>
<td><input id="supply_name/{$Slist.supply_id}" type="text" value="{$Slist.supply_name}" style="width:80px;"/></td>
<td><select id="supply_type/{$Slist.supply_id}" name="suptype">
<option value="0" {$style1}>國內
 
</option>
<option value="1" {$style2}>國外
 
</option>
</select></td>
<td><input id="supply_addr/{$Slist.supply_id}" type="text" value="{$Slist.supply_addr}" style="width:80px;"/></td>
<td><input id="supply_addr2/{$Slist.supply_id}" type="text" value="{$Slist.supply_addr2}" style="width:80px;"/></td>
<td><input id="supply_tel/{$Slist.supply_id}" type="text" value="{$Slist.supply_tel}" 
 
style="width:80px;"/></td>
<td><input id="supply_fax/{$Slist.supply_id}" type="text" value="{$Slist.supply_fax}" style="width:80px;"/></td>
<td><input id="supply_qq/{$Slist.supply_id}" type="text" value="{$Slist.supply_QQ}" style="width:80px;"/></td>
<td><input id="supply_email/{$Slist.supply_id}" type="text" value="{$Slist.supply_email}" style="width:80px;"/></td>
<td><input id="supply_msn/{$Slist.supply_id}" type="text" value="{$Slist.supply_msn}" style="width:80px;"/></td>
<td><input id="supply_linkman/{$Slist.supply_id}" type="text" value="{$Slist.supply_linkman}" style="width:50px;"/></td>
</tr>
</iterate>
<tr style="background-color:#ffffff"><td colspan="11" class="pages" style="text-align:center">{$page}</td></tr>
 
</table>
<input type="hidden" value="" id="newvalue" />