比较Javascript 和 Jquery 操作表格
2012-08-19 12:39
281 查看
原创作品，允许转载，转载时请务必以超链接形式标明文章
原始出处 、作者信息和本人声明。否则将追究法律责任。
作者：永恒の_☆ 地址：http://blog.csdn.net/chenghui0317/article/details/7882797
使用Javascript 或 Jquery 动态操作表格还是非常有必要的，使用起来很方便。好处有几点：
1、完全前端操作，不用每次保存都保存到数据库， 减少与数据库的交互；
2、使用非常方便，每次保存都不用刷新页面；
3、可操作，可维护性强，将列表和操作页面合二为一；
4、页面展示更加满足用户体验。
下面展示使用Javascript 操作表格的例子：
总的来说，使用起来还是非常方便的，先将所有的订单放在前台展示，最后点击提交全部保存，达到了“一次提交，全部保存”的效果。
另外使用Jquery框架实现上述例子功能一样的页面，代码如下：
综上可见，使用Jquery 框架比 Javascript使用起来还是方便一些的。但是我们也不能太依赖框架，否则开发的时候时不时会感觉很吃力。
原始出处 、作者信息和本人声明。否则将追究法律责任。
作者：永恒の_☆ 地址：http://blog.csdn.net/chenghui0317/article/details/7882797
使用Javascript 或 Jquery 动态操作表格还是非常有必要的，使用起来很方便。好处有几点：
1、完全前端操作，不用每次保存都保存到数据库， 减少与数据库的交互；
2、使用非常方便，每次保存都不用刷新页面；
3、可操作，可维护性强，将列表和操作页面合二为一；
4、页面展示更加满足用户体验。
下面展示使用Javascript 操作表格的例子：
<!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=GBK" />
<title> new document </title>
<style type="text/css">
body{
width:980px;
margin:0px auto;
font-size:15px;
}
table{
margin:0px auto;
width:700px;
text-align:center;
}
.title{
background:pink;
font-weight:bold;
}
</style>
<script>
var flag = 0; //标志位，标志第几个文本框
/*
*添加一个新行
*/
function insertNewRow(){
//获得表格对象
var orderTable = document.getElementById("orderTable");
var rowIndex = document.getElementById("orderTable").rows.length;
var newRow = orderTable.insertRow(rowIndex-1); //这里减一 是因为 最后一行，然后第一行作为标题了，索引就从1开始的。所以没有再减一
var rowId = "row" + flag;
newRow.id = rowId;
var cell1 = newRow.insertCell(0);
cell1.innerHTML = "<input type='text' id='txtName"+flag+"' value='' size='20'/>";
var cell2 = newRow.insertCell(1);
//index++;
cell2.innerHTML = "<input type='text' id='txtNum"+flag+"' value='' size='10'/>";
var cell3 = newRow.insertCell(2);
cell3.innerHTML = "￥<input type='text' id='txtPrice"+flag+"' value='' size='10'/>";
var cell4 = newRow.insertCell(3);
cell4.innerHTML = "<input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='确定' onclick='saveUpdateRow(\""+rowId+"\",\""+flag+"\")' />"
flag++;
}
/*
*删除选中的行
*/
function deleteSelectedRow(rowId){
//根据rowId查询出该行所在的行索引
var rowIndex = document.getElementById(rowId).rowIndex;
if(confirm("确定删除该行吗？")){
document.getElementById("orderTable").deleteRow(rowIndex);
}
}
/*
*修改选中的行
*/
function updateSelectedRow(rowId){
var rowIndex = document.getElementById(rowId).rowIndex;
//火狐浏览器居然不支持innerText，所以只能用innerHTML了
var oldName = document.getElementById("orderTable").rows[rowIndex].cells[0].innerHTML;
var oldNum = document.getElementById("orderTable").rows[rowIndex].cells[1].innerHTML;
var oldPrice = document.getElementById("orderTable").rows[rowIndex].cells[2].innerHTML;
if(oldPrice != ""){//去掉第一个人民币符号
oldPrice = oldPrice.substring(1);
}
document.getElementById("orderTable").rows[rowIndex].cells[0].innerHTML = "<input type='text' id='txtName"+flag+"' value='"+oldName+"' size='20'/>";
document.getElementById("orderTable").rows[rowIndex].cells[1].innerHTML = "<input type='text' id='txtNum"+flag+"' value='"+oldNum+"' size='10'/>";
document.getElementById("orderTable").rows[rowIndex].cells[2].innerHTML = "￥<input type='text' id='txtPrice"+flag+"' value='"+oldPrice+"' size='10'/>";
document.getElementById("orderTable").rows[rowIndex].cells[3].innerHTML = "<input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='确定' onclick='saveUpdateRow(\""+rowId+"\",\""+flag+"\")' />";
}
/*
*保存修改
*/
function saveUpdateRow(rowId,flag){
var rowIndex = document.getElementById(rowId).rowIndex;
var newName = document.getElementById("txtName"+flag).value;
var newNum = document.getElementById("txtNum"+flag).value;
var newPrice = document.getElementById("txtPrice"+flag).value;
//使用正则表达式验证一下
if(!/.+/.test(newName)){
alert("输入的名称为空！");
return false;
}
if(!/^[0-9]+$/.test(newNum)){
alert("输入的数目错误！");
return false;
}
if(!/^[0-9]+.?[0-9]*$/.test(newPrice)){
alert("输入的价格错误！");
return false;
}
document.getElementById("orderTable").rows[rowIndex].cells[0].innerHTML = newName;
document.getElementById("orderTable").rows[rowIndex].cells[1].innerHTML = newNum;
document.getElementById("orderTable").rows[rowIndex].cells[2].innerHTML = "￥" + newPrice;
document.getElementById("orderTable").rows[rowIndex].cells[3].innerHTML = "<input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='修改' onclick='updateSelectedRow(\""+rowId+"\")' />";
}
</script>
</head>
<body>
<form name="orderForm" action="" method="post">
<table id="orderTable" name="orderTable" border="1px" cellspacing="0" cellpadding="5">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td colspan="4"><input type="button" name="insert" value="增加订单" onclick="insertNewRow()"/></td>
</tr>
</table>
</form>
</body>
</html> 总的来说，使用起来还是非常方便的，先将所有的订单放在前台展示，最后点击提交全部保存，达到了“一次提交，全部保存”的效果。
另外使用Jquery框架实现上述例子功能一样的页面，代码如下：
<!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> new document </title>
<style type="text/css">
body{
width:980px;
margin:0px auto;
font-size:15px;
}
table{
margin:0px auto;
width:700px;
text-align:center;
}
.title{
background:pink;
font-weight:bold;
}
</style>
<script type="text/javascript" src="F:\jar\jquery库\jquery-1.7.1.js"></script>
<script>
var flag = 0; //标志位，标志第几行
/*
*添加一个新行
*/
function insertNewRow(){
//获得表格有多少行
var rowLength = $("#orderTable tr").length;
//这里的rowId 就是row加上标志位组合的，为了方便起见所以分开好一点。
var rowId = "row" + flag;
//每次都往低flag+1的下标出添加tr，因为append是往标签内追加，所以用after
var insertStr = "<tr id="+rowId+">"
+ "<td><input type='text' id='txtName"+flag+"' value='' size='20'/></td>"
+ "<td><input type='text' id='txtNum"+flag+"' value='' size='10'/></td>"
+ "<td>￥<input type='text' id='txtPrice"+flag+"' value='' size='10'/></td>"
+ "<td><input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='确定' onclick='saveUpdateRow(\""+rowId+"\",\""+flag+"\")' /></td>"
+ "</tr>";
$("#orderTable tr:eq("+(rowLength-2)+")").after(insertStr); //这里之所以减2 ，是因为减去底部的一行和顶部一行，剩下的为开始插入的索引。
flag++;
}
/*
*删除选中的行
*/
function deleteSelectedRow(rowId){
//根据rowId查询出该行所在的行索引
if(confirm("确定删除该行吗？")){
$("#"+rowId).remove(); //这里需要注意删除一行之后 我的标志位没有-1，因为如果减一，那么我再增加一行的话，可能会导致我的tr的id重复，不好维护。
}
}
/*
*修改选中的行
*/
function updateSelectedRow(rowId){
var oldName = $("#"+rowId+" td:eq(0)").html();
var oldNum = $("#"+rowId+" td:eq(1)").html();
var oldPrice = $("#"+rowId+" td:eq(2)").html();
if(oldPrice != ""){//去掉第一个人民币符号
oldPrice = oldPrice.substring(1);
}
var uploadStr = "<td><input type='text' id='txtName"+flag+"' value='"+oldName+"' size='20'/></td>"
+ "<td><input type='text' id='txtNum"+flag+"' value='"+oldNum+"' size='10'/></td>"
+ "<td>￥<input type='text' id='txtPrice"+flag+"' value='"+oldPrice+"' size='10'/></td>"
+ "<td><input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='确定' onclick='saveUpdateRow(\""+rowId+"\",\""+flag+"\")' /></td>";
$("#"+rowId).html(uploadStr);
}
/*
*保存修改
*/
function saveUpdateRow(rowId,flag){
var newName = $("#txtName"+flag).val();
var newNum = $("#txtNum"+flag).val();
var newPrice = $("#txtPrice"+flag).val();
//使用正则表达式验证一下
if(!/.+/.test(newName)){
alert("输入的名称为空！");
return false;
}
if(!/^[0-9]+$/.test(newNum)){
alert("输入的数目错误！");
return false;
}
if(!/^[0-9]+.?[0-9]*$/.test(newPrice)){
alert("输入的价格错误！");
return false;
}
var saveStr = "<td>" + newName + "</td>"
+ "<td>" + newNum + "</td>"
+ "<td>￥" + newPrice + "</td>"
+ "<td><input type='button' name='delete' value='删除' onclick='deleteSelectedRow(\""+rowId+"\")'/> <input type='button' name='update' value='修改' onclick='updateSelectedRow(\""+rowId+"\")' /></td>";
$("#"+rowId).html(saveStr);//因为替换的时候只替换tr标签内的html 所以不用加上tr
}
</script>
</head>
<body>
<form name="orderForm" action="" method="post">
<table id="orderTable" name="orderTable" border="1px" cellspacing="0" cellpadding="5">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td colspan="4"><input type="button" name="insert" value="增加订单" onclick="insertNewRow()"/></td>
</tr>
</table>
</form>
</body>
</html>综上可见，使用Jquery 框架比 Javascript使用起来还是方便一些的。但是我们也不能太依赖框架，否则开发的时候时不时会感觉很吃力。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript 可以全选反选删除的表格(比较全面的操作了表格)
- 用JavaScript对表格的操作
- 使用 JQuery 操作表格(交替显示、拖动表格行、选择行等)
- 初识JavaScript，Ajax，jQuery，并比较三者关系
- JavaScript jQuery 中定义数组与操作及jquery数组操作
- 使用jQuery对表格的操作,组织JSON字符串
- jquery 操作表格列
- Jquery表格行列操作
- 本文详细介绍javascript操作表格排序
- Javascript操作table,tr,td和表格CSS样式设置小常识
- Javascript动态生成表格的性能比较和调优
- 基于jQuery的表格操作插件
- JavaScript与jQuery常用方法的比较
- javascript 动态插入行 表格操作
- [转]15款提高表格操作的jQuery插件
- jquery随记---ajax之操作javascript对象
- jQuery中有关表单、表格的操作
- jQuery中实现表格的增、删、改操作
- javascript中那些计算元素位置的方法和jQuery位置计算方法比较
- JavaScript（2）jQuery常用操作+CSS相关知识