javascript页面表格排序

最新推荐文章于 2024-01-31 18:01:15 发布
最新推荐文章于 2024-01-31 18:01:15 发布
阅读量907 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript function date java float html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/welcomejzh/article/details/2649138
版权
 

javascript页面表格排序

javascript 页面排序

今天项目中需要页面点击表头,按升降排序,查找了各方面资料,根据网上实例,自己改写了一个简单的例子
说到排序,肯定少不了Array Methods 中的 sort(),简单的介绍一下.
sort()方法可用来排列数组中的元素,语法是
Java代码 复制代码
  1. arrayObject.sort(sortByRequest)  
    arrayObject.sort(sortByRequest)

注释: 1.sortByRequeset是可选项，指定排列次序。必须是一个函数。
2.sort()默认是没有参数，函数按照字母大小排列。如果是数字按照默认情况排列，会出现错误（e.g：1,11,2,21）
3.当使用sort()后，array发生改变。

页面表格js排序，首先要得到具体哪个表格，这个不需要讲了吧！
Java代码 复制代码
  1. sTable = document.getElementById(tableId);  
    sTable = document.getElementById(tableId);

表格找到后必须对表格的内容进行应用,即得到表格tbodies的集合.
Java代码 复制代码
  1. var tbody = table.tBodies[0];  
  2. var colRows = tbody.rows;  
    var tbody = table.tBodies[0];
    var colRows = tbody.rows;


得到tbodies集合以后放入Array里面
Java代码 复制代码
  1. var aTrs = new Array;  
  2. for (var i=0; i < colRows.length; i++) {  
  3.    aTrs[i] = colRows[i];  
  4. }  
    var aTrs = new Array;
    for (var i=0; i < colRows.length; i++) {
	      aTrs[i] = colRows[i];
    }

所有信息已经准备完毕,我们对array进行排序(也就是上面代码中的aTrs)
Java代码 复制代码
  1. aTrs.sort(compareEle());  
     aTrs.sort(compareEle());

其中compareEle()是指定排列次序的函数。
当把数字（aTrs）排列完毕以后，需要重新生成表格

Java代码 复制代码
  1. var oFragment = document.createDocumentFragment();              
  2. for(var i=0; i < aTrs.length; i++) {  
  3.     oFragment.appendChild(aTrs[i]);  
  4. }  
  5.     tbody.appendChild(oFragment);  
    var oFragment = document.createDocumentFragment();            
    for(var i=0; i < aTrs.length; i++) {
        oFragment.appendChild(aTrs[i]);
    }
        tbody.appendChild(oFragment);

这样，基本的功能已经介绍已经完成。
如果要在项目中加入这项功能需要考虑以下基本内容
1.浏览器的类型
2.需要定位是对哪一列进行排列
3.需要排列的列的数据类型。
4.是否连续排序（eg：如果按照升序排列以后，再次点击，应该按照降序列）
所以最终详细设计
Java代码 复制代码
  1. function ieOrFireFox(ob)  
  2. {  
  3.     if (ob.textContent != null)  
  4.     return ob.textContent;  
  5.     var s = ob.innerText;  
  6.     return s.substring(0, s.length);  
  7. }  
  8.   
  9. //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型  
  10. function sortAble(tableId, iCol, dataType) {  
  11.     var table = document.getElementById(tableId);  
  12.     var tbody = table.tBodies[0];  
  13.     var colRows = tbody.rows;  
  14.     var aTrs = new Array;  
  15.          //将将得到的列放入数组，备用  
  16.     for (var i=0; i < colRows.length; i++) {  
  17.         aTrs[i] = colRows[i];  
  18.     }  
  19.                         
  20.                    
  21.     //判断上一次排列的列和现在需要排列的是否同一个。  
  22.     if (table.sortCol == iCol) {  
  23.         aTrs.reverse();  
  24.     } else {  
  25.         //如果不是同一列，使用数组的sort方法，传进排序函数  
  26.         aTrs.sort(compareEle(iCol, dataType));  
  27.     }  
  28.           
  29.     var oFragment = document.createDocumentFragment();  
  30.                   
  31.     for (var i=0; i < aTrs.length; i++) {  
  32.         oFragment.appendChild(aTrs[i]);  
  33.     }                  
  34.     tbody.appendChild(oFragment);  
  35.     //记录最后一次排序的列索引  
  36.     table.sortCol = iCol;  
  37. }  
  38. //将列的类型转化成相应的可以排列的数据类型  
  39. function convert(sValue, dataType) {  
  40.     switch(dataType) {  
  41.     case "int":  
  42.         return parseInt(sValue);  
  43.     case "float":  
  44.         return parseFloat(sValue);  
  45.     case "date":  
  46.         return new Date(Date.parse(sValue));  
  47.     default:  
  48.         return sValue.toString();  
  49.     }  
  50. }  
  51.               
  52. //排序函数，iCol表示列索引，dataType表示该列的数据类型  
  53. function compareEle(iCol, dataType) {  
  54.     return  function (oTR1, oTR2) {  
  55.         var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);  
  56.         var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);  
  57.         if (vValue1 < vValue2) {  
  58.             return -1;  
  59.         } else if (vValue1 > vValue2) {  
  60.             return 1;  
  61.         } else {  
  62.             return 0;  
  63.         }  
  64.        };  
  65. }  
function ieOrFireFox(ob)
{
    if (ob.textContent != null)
	return ob.textContent;
    var s = ob.innerText;
    return s.substring(0, s.length);
}

//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
function sortAble(tableId, iCol, dataType) {
	var table = document.getElementById(tableId);
	var tbody = table.tBodies[0];
	var colRows = tbody.rows;
	var aTrs = new Array;
         //将将得到的列放入数组，备用
	for (var i=0; i < colRows.length; i++) {
		aTrs[i] = colRows[i];
	}
                      
                 
	//判断上一次排列的列和现在需要排列的是否同一个。
	if (table.sortCol == iCol) {
		aTrs.reverse();
	} else {
		//如果不是同一列，使用数组的sort方法，传进排序函数
		aTrs.sort(compareEle(iCol, dataType));
	}
        
	var oFragment = document.createDocumentFragment();
                
	for (var i=0; i < aTrs.length; i++) {
		oFragment.appendChild(aTrs[i]);
	}                
	tbody.appendChild(oFragment);
	//记录最后一次排序的列索引
	table.sortCol = iCol;
}
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
	switch(dataType) {
	case "int":
		return parseInt(sValue);
	case "float":
		return parseFloat(sValue);
	case "date":
		return new Date(Date.parse(sValue));
	default:
		return sValue.toString();
    }
}
            
//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
	return  function (oTR1, oTR2) {
		var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
		var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
		if (vValue1 < vValue2) {
			return -1;
		} else if (vValue1 > vValue2) {
			return 1;
		} else {
			return 0;
		}
       };
}


具体使用:
将上述代码保存为 sortable.js,在同一目录下新建sortable.html
Java代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> New Document </TITLE>  
  5.   <script src="sortable.js" type="text/javascript"></script>  
  6.  </HEAD>  
  7.   
  8.  <BODY>  
  9.  <p>Sortable demo:</p>  
  10.         <table border="1" id="tableId">  
  11.             <thead>  
  12.                 <tr>  
  13.                     <th οnclick="sortAble('tableId', 0)"    
  14.                          style="cursor:pointer">name</th>  
  15.                     <th οnclick="sortAble('tableId', 1, 'date')"  
  16.                          style="cursor:pointer">Birthday</th>  
  17.                     <th οnclick="sortAble('tableId', 2, 'int')"   
  18.                          style="cursor:pointer">Age</th>  
  19.                 </tr>  
  20.             </thead>  
  21.             <tbody>  
  22.                 <tr>  
  23.                     <td>Ozone</td>  
  24.                     <td>01/12/1982</td>  
  25.                     <td>25</td>  
  26.                 </tr>  
  27.                 <tr>  
  28.                     <td>OnlyBlue3</td>  
  29.                     <td>10/24/1983</td>  
  30.                     <td>23</td>  
  31.                 </tr>  
  32.                 <tr>  
  33.                     <td>Momo</td>  
  34.                     <td>10/14/1999</td>  
  35.                     <td>8</td>  
  36.                 </tr>  
  37.             </tbody>  
  38.         </table>  
  39.     
  40.  </BODY>  
  41. </HTML>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script src="sortable.js" type="text/javascript"></script>
 </HEAD>

 <BODY>
 <p>Sortable demo:</p>
        <table border="1" id="tableId">
            <thead>
                <tr>
                    <th οnclick="sortAble('tableId', 0)"  
                         style="cursor:pointer">name</th>
                    <th οnclick="sortAble('tableId', 1, 'date')"
                         style="cursor:pointer">Birthday</th>
                    <th οnclick="sortAble('tableId', 2, 'int')" 
                         style="cursor:pointer">Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ozone</td>
                    <td>01/12/1982</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>OnlyBlue3</td>
                    <td>10/24/1983</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>Momo</td>
                    <td>10/14/1999</td>
                    <td>8</td>
                </tr>
            </tbody>
        </table>
  
 </BODY>
</HTML>


以上例子经过 ie6 和 firefox2.0.0.5调试通过



Ozone 写道
//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
if (vValue1 < vValue2) {
return -1;
} else if (vValue1 > vValue2) {
return 1;
} else {
return 0;
}
};



这里的oTR1, oTR2的值是怎么获得的？为什么会有值？
yongsky 2007-08-05
要对表格进行各种操作建议用DhtmlGrid,功能很全面不仅包括对表格排序还可以编辑,拖拉宽度,选定等等.
Ozone 2007-08-01
这样在html文件中,可以去掉<thead></thead><tbody></tbody>标签了!
Ozone 2007-08-01
最 近一直对以前的系统中的表格添加排序功能,发现系统中的表格并没 有<thead></thead><tbody></tbody>这些标签,每次出了给表头添加点击事 件,还要添加而外标签.为了减少工作量,把js做了个小小调整.
Java代码 复制代码
  1. function ieOrFireFox(ob){    
  2.      if (ob.textContent != null)    
  3.      return ob.textContent;    
  4.      var s = ob.innerText;    
  5.      return s.substring(0, s.length);    
  6. }    
  7.      
  8. //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型    
  9. function sortAble(tableId, iCol, dataType){    
  10.     var table = document.getElementById(tableId);    
  11.     var tbody = table.tBodies[0];    
  12.     var colRows = tbody.rows;    
  13.     var aTrs = new Array;    
  14.     //将将得到的列放入数组，备用    
  15.     for (var i=0; i < colRows.length-1; i++) {    
  16.          aTrs[i] = colRows[i+1];    
  17.     }    
  18.                                                 
  19.  //判断上一次排列的列和现在需要排列的是否同一个。    
  20.     if (table.sortCol == iCol) {    
  21.         aTrs.reverse();    
  22.     } else {    
  23.      //如果不是同一列，使用数组的sort方法，传进排序函数    
  24.          aTrs.sort(compareEle(iCol, dataType));    
  25.     }             
  26.     var oFragment = document.createDocumentFragment();    
  27.                    
  28.     for (var i=0; i < aTrs.length; i++) {    
  29.         oFragment.appendChild(aTrs[i]);    
  30.     }                    
  31.     tbody.appendChild(oFragment);    
  32.      //记录最后一次排序的列索引    
  33.     table.sortCol = iCol;    
  34.  }    
  35.  //将列的类型转化成相应的可以排列的数据类型    
  36. function convert(sValue, dataType) {    
  37.      switch(dataType) {    
  38.      case "int":    
  39.          return parseInt(sValue);    
  40.      case "float":    
  41.          return parseFloat(sValue);    
  42.      case "date":    
  43.          return new Date(Date.parse(sValue));    
  44.      default:    
  45.          return sValue.toString();    
  46.      }    
  47.  }    
  48.                  
  49.  //排序函数，iCol表示列索引，dataType表示该列的数据类型    
  50. function compareEle(iCol, dataType) {    
  51.     return  function (oTR1, oTR2) {    
  52.          var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);    
  53.          var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);    
  54.          if (vValue1 < vValue2) {    
  55.              return -1;    
  56.          } else if (vValue1 > vValue2) {    
  57.              return 1;    
  58.          } else {    
  59.              return 0;    
  60.          }    
  61.         };    
  62.  }    
function ieOrFireFox(ob){  
     if (ob.textContent != null)  
     return ob.textContent;  
     var s = ob.innerText;  
     return s.substring(0, s.length);  
}  
   
//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型  
function sortAble(tableId, iCol, dataType){  
    var table = document.getElementById(tableId);  
    var tbody = table.tBodies[0];  
    var colRows = tbody.rows;  
    var aTrs = new Array;  
    //将将得到的列放入数组，备用  
    for (var i=0; i < colRows.length-1; i++) {  
         aTrs[i] = colRows[i+1];  
    }  
                                              
 //判断上一次排列的列和现在需要排列的是否同一个。  
    if (table.sortCol == iCol) {  
        aTrs.reverse();  
    } else {  
     //如果不是同一列，使用数组的sort方法，传进排序函数  
         aTrs.sort(compareEle(iCol, dataType));  
    }           
    var oFragment = document.createDocumentFragment();  
                 
    for (var i=0; i < aTrs.length; i++) {  
        oFragment.appendChild(aTrs[i]);  
    }                  
    tbody.appendChild(oFragment);  
     //记录最后一次排序的列索引  
    table.sortCol = iCol;  
 }  
 //将列的类型转化成相应的可以排列的数据类型  
function convert(sValue, dataType) {  
     switch(dataType) {  
     case "int":  
         return parseInt(sValue);  
     case "float":  
         return parseFloat(sValue);  
     case "date":  
         return new Date(Date.parse(sValue));  
     default:  
         return sValue.toString();  
     }  
 }  
               
 //排序函数，iCol表示列索引，dataType表示该列的数据类型  
function compareEle(iCol, dataType) {  
    return  function (oTR1, oTR2) {  
         var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);  
         var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);  
         if (vValue1 < vValue2) {  
             return -1;  
         } else if (vValue1 > vValue2) {  
             return 1;  
         } else {  
             return 0;  
         }  
        };  
 }
Ozone 2007-07-24
在项目使用当中,发现如果在页面中,本来表格中没有数据,通过js从其他地方添加到本页面时,无法进行排序,甚至连onclick事件都不触发。至于为什么，还没有研究明白。找了一种“偷懒方法”可以解决上述问题。即添加一个隐藏行。
Java代码 复制代码
  1. <HTML>    
  2.   <HEAD>    
  3.    <TITLE> New Document </TITLE>    
  4.    <script src="sortable.js" type="text/javascript"></script>    
  5.   </HEAD>    
  6.      
  7.   <BODY>    
  8.   <p>Sortable demo:</p>    
  9.          <table border="1" id="tableId">    
  10.              <thead>    
  11.                  <tr>    
  12.                      <th οnclick="sortAble('tableId', 0)"      
  13.                           style="cursor:pointer">name</th>    
  14.                      <th οnclick="sortAble('tableId', 1, 'date')"    
  15.                           style="cursor:pointer">Birthday</th>    
  16.                      <th οnclick="sortAble('tableId', 2, 'int')"     
  17.                           style="cursor:pointer">Age</th>    
  18.                  </tr>    
  19.              </thead>    
  20.              <tbody>   
  21.                  <tr style="display:none"></tr>   
  22.                  <tr>    
  23.                      <td>Ozone</td>    
  24.                      <td>01/12/1982</td>    
  25.                      <td>25</td>    
  26.                  </tr>    
  27.                  <tr>    
  28.                      <td>OnlyBlue3</td>    
  29.                      <td>10/24/1983</td>    
  30.                      <td>23</td>    
  31.                  </tr>    
  32.                  <tr>    
  33.                      <td>Momo</td>    
  34.                      <td>10/14/1999</td>    
  35.                      <td>8</td>    
  36.                  </tr>    
  37.              </tbody>    
  38.          </table>    
  39.        
  40.   </BODY>    
  41.  </HTML>   
骑猪逛街
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现表格的排序
Just The Way You Are
08-06 1729
利用JS实现表格排序，依赖于JS数组中Array对象的sort方法 首先介绍一下sort()方法： 1.定义和用法： sort()方法用于对数组元素的排序 2.语法： arrayObject.sort(sortRule); 3.参数： sortRule ：可选。规定排序顺序。必须是函数。 4.返回值： 对数组的引用。数组在原数组上进行排序，不生成副本。 5.说明： 如果调用该
JavaScript实现表格排序
不忘初心，方得始终
03-16 3283
Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。效果 在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序 按照字符串比较来确定顺序 再次点击该栏目，变更为降序排序 点击其它栏目，则按其它栏目的值重新排序 注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色 要求 不能改动原html，只能够添加js
JS表格排序
Nty268的博客
04-15 1151
//查找表格的<th>元素，让它们可单击 function makeSortable(table) { //var headers = document.getElementsByTagName("th"); //全页面table排序 var headers = table.getElementsByTagName("th"); //选定table排序 // console.log(headers); for (var i = 1; i < headers.l
js对表格table行排序
最新发布
01-31 274
【代码】js对表格table行排序。
javascript表格随机排序代码
10-30
非常不错的思路，用js实现表格的随机排序，建议大家看代码，学习编程思路
33种Javascript 表格排序控件收集
10-29
以下是对33种JavaScript表格排序控件的详细说明： 1. jQuery tablesorter（1）：这是一个基于jQuery的插件，支持多种类型的排序，包括数字、日期和自定义排序。它具有高度可定制性，允许用户添加自定义排序标志和...
javascript 二维排序表格代码
10-28
这个JavaScript代码示例展示了如何创建这样一个功能丰富的表格，包括排序、编辑和随机数据生成等功能。下面将详细解释代码的工作原理和关键知识点。 首先，这个表格的主要功能是排序。当用户单击表格的列头（th元素...
JavaScript实现表格排序方法
01-19
参考代码： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=gb2312″ /> <...JavaScript控制网页内表格排序</title> <style> 
JavaScript实现表格点击排序的方法
12-07
在JavaScript中实现表格点击排序是常见的前端开发技巧，尤其在数据展示和管理的...通过结合HTML、CSS和JavaScript，我们可以创建出动态且用户友好的表格排序功能，这对于任何涉及数据展示的Web应用程序都是至关重要的。
JavaScript 表格排序
11-05
JavaScript 表格排序双击可进行按表格列排序
如何使用 JavaScript 对表中的行进行排序？
allway2的博客
04-01 598
由于 JavaScript 没有提供任何内置函数来对表格进行排序，我们将需要使用本地方法来对给定的表格进行排序。我们将研究本文中的方法。 方法： 以下两个示例都将使用基本算法和类似方法。循环程序对元素进行切换和排序，直到排序完毕。 // executes on action like button click Function() { // main loop that runs until table is sorted While (condition = true) {
Javascript对HTML表格排序-很实用
chunyuan314的博客
07-25 1万+
Javascript对HTML表格排序-很烂但实用 Javascript实现HTML表格排序，点击表头的标题单元格，即可对该列排序，升序降序切换，数字、文本都可以排序。 先看下面的效果图： 该功能已经封装成了一个Javascript函数，要实现表格排序的功能非常简单，只需： 引入包含该函数的js文件（需要预先引入jQuery）—— 这个不难 在需要排序的表格的标题单元格（th元素）的...
使用 JavaScript 进行HTML表格排序
allway2的博客
03-31 1129
当 HTML 表有很多数据时，使信息列可排序会很有用。 以下技术使用 JavaScript 通过单击列标题对表行进行排序。 这是一个所有列都可排序的示例表。第二次单击同一列标题文本会反转排序。 Author Title Rating Review Date John Irving The cider house rules 6 January 31, 11 Kate Atkinson When will there be good news? 7
球员信息的操作
BoBrother的博客
10-23 397
.left{ float: left; } .right{ float: right; } .even{ background-color: blue; } .odd{ background-color: red; } .first{ background-color: yellow; } .f{ background-color: pink; } .d{ b
js实现表格的排序功能
Edward的web前端修炼之路
09-06 7107
之前的阿里线上笔试最后一道就是实现表格的排序功能，但当时由于时间有限没能完成，于是今天趁着午休时间完成了这个功能。 下面附上代码（有注释）：（该功能是完成了对age的升序（从小到大）的排序） Document table { border: 1px solid #ccc; width: 1000px; margin: 20px auto; borde
js几种常见排序的实现
热门推荐
大康子
04-21 2万+
下面主要是对冒泡排序、选择排序、快速排序、插入排序的js实现的回顾。1. 冒泡排序 定义： 比较相邻的前后二个数据，如果前面数据大于后面的数据，就将二个 数据交换。 这样对数组的第0个数据到N-1个数据进行一次遍历后，最大的一个数据就“沉”到数组第N-1个位置。 N=N-1，如果N不为0就重复前面二步，否则排序
jQuery：在Web页面实现表格排序功能
gyxx1998的博客
04-21 1571
jQuery each() 方法 each() 方法为每个匹配元素规定要运行的函数。 语法: $(selector).each(function(index,element)) function(index,element) 必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置。 element - 当前的元素（也可使用 "this" 选择器）。 Example1...
原生JavaScript实现简易Datagrid表格教程：功能与示例
本文档详细介绍了如何使用原生JavaScript实现一个简单的数据表格（Datagrid）功能。Datagrid是一种常见的前端展示大量数据的组件，常用于表格数据的展示、排序、编辑、筛选和分页等功能。以下将逐步探讨实现这些功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值