- 浏览: 27391 次
- 性别:
- 来自: 南京
文章分类
最新评论
如何对HTML的表格进行数据的CRUD操作2
创建大套餐<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="/wcs/javascript/tools/common/dynamiclist.js"></script><script src="../javascript/tools/promotion/voucherBigPackage/SNPackageList.js"></script><script src="/wcs/javascript/tools/common/Vector.js"></script><script src="../javascript/tools/promotion/jquery.js" type="text/javascript"></script><script src="../javascript/tools/promotion/voucherBigPackage/bigPacageUtil.js"></script><!-- Get user bean --><!-- user javascript function include here --><!-- javascript function defined in XML will be included in parent frame --><meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="expires" content="fri,31 Dec 1990 10:00:00 GMT">
<link rel="stylesheet" href="/wcs/tools/common/centre_zh_CN.css" type="text/css">
<script language="JavaScript">
var input=new Array();
var quatity=new Array();
var packageRange=new Array();
var resultsSize;
function initializeState(){
removeCommonProduct();
var packageRangeTmp=top.getData("resultsList");
if (parent.parent.get) {
var o=parent.parent.get("SNCreateBigPackageData",null);
if (o != null) {
var tmp=new Array();
tmp=o.productInfoList;
packageRange=removeDuplicate(packageRangeTmp,tmp);
o.productInfoList=packageRange;
}
}
if(packageRange!=null&&packageRange.length!=0){
resultsSize=packageRange.length;
top.saveData(null,"resultsList");
}
}
function removeCommonProduct(){
if (parent.parent.get) {
var o=parent.parent.get("SNCreateBigPackageData",null);
if (o != null&&o.productInfoList&&o.productInfoList.length==1){
var commonProduct = o.productInfoList[0];
if(commonProduct.catGroupName=="全部"&&
commonProduct.brandName=="全部"&&
commonProduct.productName=="全部"&&
commonProduct.salesOrgName=="全部"&&
commonProduct.vendorName=="全部")
o.productInfoList=new Array();
}
}
}
function getResultsSize () {
return resultsSize;
}
// This is function is to detemine if the user have navigate back to previous
// panel and change the promotion type which may affect the range. -- 5.1
// This function may not be used because if the range changed, the user has to go through the previous
// Fixed or Percent page anyway. -- rule based
function onLoad() {
parent.loadFrames();
}
function deleteAction(){
}
function add(){
//top.saveData(input,"input");
var obj=new Object();
parent.savePanelData();
top.saveModel(parent.parent.model);
top.setReturningPanel("SNBigPackageBundle");
url="/webapp/wcs/tools/servlet/DialogView?XMLFile=SNPromotion.SNSeacherPackageBundleList";
top.setContent("包搜索",url,true);
}
function deleteAction(){
var flag=window.confirm("真的要删除吗?");
if(flag){
var str="";
var checkStr="";
var chks = document.getElementsByName("checkAll");
for (var i = 0, j = chks.length; i < j; i++) {
if(chks[i].checked == true){
str+=chks[i].value+";";
}
}
var s=str.split(";");
var arr=new Array();
for(var k=0;k<s.length-1;k++){
arr.push(s[k]);
}
if(arr.length==0){
alertDialog("请选择要删除的记录!");
return false;
}
var str=arr.sort();
var packageRangeTmp1=new Array();
for(var i=0;i<eval(str[0].toString());i++){
packageRangeTmp1[i]=packageRange[i];
}
for(var i=0;i<str.length;i++){
if((i+1)<str.length){
for(var j=eval(str[i].toString())+1;j<eval(str[i+1].toString());j++){
packageRangeTmp1[packageRangeTmp1.length]=packageRange[j];
}
}else{
for(var k=eval(str[i].toString())+1;k<packageRange.length;k++){
packageRangeTmp1[packageRangeTmp1.length]=packageRange[k];
}
}
}
if(parent.parent.get){
var o=parent.parent.get("SNCreateBigPackageData",null);
if (o != null) {
o.productInfoList=packageRangeTmp1;
}
}
parent.checkeds=new Vector();
var url="/webapp/wcs/tools/servlet/NewDynamicListView?ActionXMLFile=SNPromotion.SNBigPackageBundleList&cmd=SNBigPackageBundleView";
parent.parent.CONTENTS.location.replace(url);
}else{
return false;
}
}
parent.savePanelData=function(){
//parent.validatePanelData();
top.saveData(input,"input");
top.saveData(quatity,"quatity");
if(parent.parent.get){
var o=parent.parent.get("SNCreateBigPackageData",null);
if (o != null) {
o.input=input;
o.quatity=quatity;
}
}
}
parent.validatePanelData = function (){
var packageRangeTmp=top.getData("resultsList");
if (parent.parent.get) {
var o=parent.parent.get("SNCreateBigPackageData",null);
if (o != null) {
var tmp=new Array();
tmp=o.productInfoList;
packageRange=removeDuplicate(packageRangeTmp,tmp);
if(packageRange.length<2){
alert("至少选择两个包");
return false;
}
}
}
}
function load(){
page = new Page(10,'packageList','group_one',1,'pageno',"divFood"); //品牌+品类分页
}
</script><script src="/wcs/javascript/tools/common/Util.js">
</script><meta name="GENERATOR" content="IBM WebSphere Studio">
<script language="JavaScript">
<!--
//For IE
if (document.all) {
onLoad();
}
//-->
</script>
<script>
parent.parent.setContentFrameLoaded(true);
</script><script>
$("#divFood").show();
if(packageRange.length==0){
$("#divFood").html("第0页/共0页");
}else{
$("#divFood").html("第"+1+"页/共"+Math.ceil((packageRange.length/10)*1)+"页");
}
function setValue(index){
top.saveData(null,"input");
var value=document.getElementById("query"+index).value;
input[index]=value
// top.saveData(input,"input");
}
function check(index){
var id=document.getElementById("query"+index);
var tmpValue=id.value;
if(!isNumber(id.value)){
id.value=input[index];
id.focus();
return false;
}
if(id.value>packageRange.length){
id.value=input[index];
id.focus();
alertDialog("输入的值超出范围!");
return false;
}
//checkValue(index,id);
}
function checkAllStates(states) {
var chks = document.getElementsByName("checkAll");
for (var i = 0, j = chks.length; i < j; i++) {
if (chks[i].disabled == true)
continue;
chks[i].checked = states;
}
}
function checkOneStates(states,index){
var chks = document.getElementsByName("checkAll");
for (var i = 0, j = chks.length; i < j; i++) {
if (chks[i].value == index){
//chks[i].checked = states;
// alert(chks[i].value)
chks[i].setAttribute("checked",states)
break;
}
}
}
function checkValue(index,id){
var flag=true;
var count;
var table=document.getElementById("packageList");
for(var i=0;i<input.length;i++){
for(var j=0;j<input.length;j++){
if((index+1)==input[index]){
id.value="";
count=index;
flag=false;
break;
}
}
alertDialog("和其他行重复!");
break;
}
return flag;
}
/********************************/
function setquatityValue(index){
top.saveData(null,"quatity");
var value=document.getElementById("quatity"+index).value;
quatity[index]=value
// top.saveData(input,"input");
}
function checkquatity(index){
var id=document.getElementById("quatity"+index);
var tmpValue=id.value;
if(tmpValue=="0"){
id.value=1
}
if(!isNumber(id.value)){
id.value=quatity[index]==undefined?1:quatity[index];
id.focus();
return false;
}
}
</script>
绑定包范围
<script language="JavaScript"> initializeState(); document.write(packageRange.length+" 项"); </script>
<script language="JavaScript">
var sb=[];
sb[sb.length]='<table id="packageList" cellpadding="1" cellspacing="0" border="0" width="100%" bgcolor="#FFFFFF" style="folat:left" >';
sb[sb.length]='<tr>';
sb[sb.length]="<th id='rewardAmount_full_head' class='list_header' width='1%'><input type='checkBox' onClick='checkAllStates(this.checked)'></th>";
sb[sb.length]='<th id="rewardAmount_full_head" class="list_header" >包名称</th>';
sb[sb.length]='<th id="toTotalLimit_full_head" class="list_header" >包状态</th>';
sb[sb.length]='<th id="toTotalLimit_full_head" class="list_header" >数量</th>';
sb[sb.length]='<th id="rewardAmount_full_head" class="list_header" >顺序</th>';
sb[sb.length]='</tr>';
sb[sb.length]='<tbody id="group_one">';
if(packageRange!=null&&packageRange.length>0){
for(var i=0;i<packageRange.length;i++){
if(top.getData("input").length>0){
input[i]=top.getData("input")[i];
//alert(input[i])
}else{
input[i]=i*1+1;
}
if(top.getData("quatity")!=undefined){
quatity[i]=top.getData("quatity")[i];
//alert(input[i])
}else{
quatity[i]=1;
}
sb[sb.length]='<tr>';
sb[sb.length]='<td class="list_info1"><input type="checkBox" name="checkAll" OnClick="checkOneStates(this.checked,'+i+')" value="'+i+'"/></td>';
sb[sb.length]='<td class="list_info1">'+packageRange[i].bigName+'</td>';
sb[sb.length]='<td class="list_info1">'+tranlet(packageRange[i].status)+'</td>';
if(top.getData("input")!=undefined){
// alert(1)
var tt=top.getData("quatity")[i]==undefined ? 1:top.getData("quatity")[i]
sb[sb.length]='<td class="list_info1"><input type="text" id="quatity'+i+'" size="1%" onchange="setquatityValue('+i+');" value="'+tt+'" onkeyup="checkquatity('+i+');"/></td>';
}else{
// alert(2)
sb[sb.length]='<td class="list_info1"><input type="text" id="quatity'+i+'" size="1%" onchange="setquatityValue('+i+');" value="'+quatity[i]+'" onkeyup="checkquatity('+i+');"/></td>';
}
if(top.getData("input")!=undefined){
// alert(1)
var t=top.getData("input")[i]==undefined ? i+1:top.getData("input")[i]
sb[sb.length]='<td class="list_info1"><input type="text" id="query'+i+'" size="1%" onchange="setValue('+i+');" value="'+t+'" onkeyup="check('+i+');"/></td>';
}else{
// alert(2)
sb[sb.length]='<td class="list_info1"><input type="text" id="query'+i+'" size="1%" onchange="setValue('+i+');" value="'+input[i]+'" onkeyup="check('+i+');"/></td>';
}
sb[sb.length]='</tr>';
}
}
sb[sb.length]='</tbody>';
sb[sb.length]='</table>';
document.write(sb.join(""));
var table=document.getElementById("packageList");
for (var i = 0; i < table.rows.length; i++){
if ((i+1) % 2){
table.rows[i].style.backgroundColor = '#efefef';
}
}
changeColor('packageList');
function tranlet(index){
var obj;
switch(index){
case '1' : {obj='激活'};break;
case '0' : {obj='未激活'};break;
default :obj="X";
}
return obj;
}
function changeColor(id){
try{
var tableid=id; //表格的id
var overcolor='#dfdcf6'; //鼠标经过颜色
var color1='#efefef'; //第一种颜色
var color2='#ffffff'; //第二种颜色
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=1 ;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}catch(e){}
}
</script>
|
|
相关推荐
在JavaScript(JS)中操作HTML表格是Web开发中常见的任务,尤其在实现CRUD(创建、读取、更新、删除)操作时。本教程将深入探讨如何使用纯JS实现这一功能,无需依赖任何外部库,如jQuery或Angular。 首先,我们需要...
1. **EasyUI DataGrid**: DataGrid是EasyUI中的核心组件之一,它用于展示和管理表格数据。通过DataGrid,我们可以实现分页、排序、过滤等功能,并且可以方便地进行数据的CRUD操作。DataGrid通过JSON数据源获取数据,...
- `App.vue`: 应用的主组件,可能包含了一个表格用于显示数据,以及按钮用于导航到其他CRUD操作页面。 - `crudService.js`: 可能是一个服务模块,封装了与后端通信的逻辑,如添加、获取、更新和删除数据的API调用。 ...
5. **DAO层设计**:创建Hibernate的Data Access Object(DAO)接口和实现类,这里包含对数据库的CRUD操作方法,比如使用Session对象执行SQL语句。 6. **Service层设计**:创建Service接口和实现类,将业务逻辑封装...
4. **分页操作**:在描述中提到了分页,这意味着项目可能包含了对大量数据的处理。分页功能通常通过计算总页数、当前页码,以及每页显示的数据量来实现,这可以帮助优化用户体验,避免一次性加载过多数据导致性能...
综合以上分析,这个CRUD示例项目主要展示了如何利用EasyUI和PHP来实现对数据库中的用户数据进行基本操作。开发者可以借此学习如何结合前端和后端技术,实现数据交互,理解CRUD操作在实际项目中的应用。通过阅读和...
2. **CRUD 操作** CRUD是数据库操作的基本动作,本示例通过EasyUI实现了这四个功能。 - **创建(Create)**:在 "test.json" 或 "datagrid_json.json" 中定义初始数据,"save_user.php" 处理新增用户的数据提交。 ...
在"EasyUI第一讲"的压缩包文件中,可能包含了示例代码、HTML 模板、CSS 样式和 JavaScript 文件,这些都是用来演示如何配置和使用 DataGrid 进行 CRUD 操作的。通过研究这些文件,开发者可以更好地理解和应用 EasyUI...
"jQuery Table CRUD"指的是使用jQuery来实现表格数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete)功能。这是一种常见的Web应用程序功能,用于管理动态数据。下面我们将深入探讨如何利用jQuery来实现这一...
2. **读取(Read)**:Servlet可能提供一个接口,返回所有或特定记录的数据,这些数据被渲染到JSP页面上,以表格或其他形式展示给用户。 3. **更新(Update)**:用户选择一条记录进行编辑,修改后的数据再次发送到...
本项目利用IntelliJ IDEA这个强大的集成开发环境(IDE)来整合这些技术,实现了数据库的CRUD(创建Create、读取Read、更新Update、删除Delete)操作。以下将详细介绍每个组件及其在项目中的作用。 1. **Servlet**:...
CRUD是数据库管理的基本操作,而分页则是为了提高用户体验,使得大量数据可以被有序、分批地展示。 **创建(Create)** 在ASP中,创建新数据通常涉及到向数据库执行INSERT语句。这可能通过ADO(ActiveX Data ...
在Web应用中,Model负责处理数据和业务逻辑,View负责展示数据,Controller负责接收用户请求并调用Model和View进行相应操作。在本项目中,Servlet通常作为Controller,JSP作为View,而业务逻辑和数据访问层则可能由...
grocery CRUD是一本详细介绍如何使用CodeIgniter框架进行快速开发的书籍。本书由鹤仔撰写并由鹤仔出版社荣誉出版,旨在帮助开发者们掌握grocery CRUD的核心功能及其在CodeIgniter中的应用。 #### 二、grocery CRUD...
在CRUD操作中,Struts2可以很好地协调前端EXT3的请求和后端的数据处理。 Hibernate是Java领域中的一个对象关系映射(ORM)框架,它消除了直接使用JDBC进行数据库操作的繁琐工作。通过配置文件和注解,Hibernate将...
6. 数据绑定:将表格数据绑定到JavaScript对象或数组,可以使用模板字符串或库如Vue.js,React等实现双向数据绑定,简化CRUD操作。 7. 表格插件:使用jQuery的DataTables,Bootstrap的Table,或者现代的Ag-Grid,...
- **删除**:选择特定行后,前端发起请求,后台处理删除操作,然后更新表格数据。 - **查询**:用户可以通过输入关键字或选择条件来过滤表格数据,后台根据这些条件查询数据库并返回结果。 - **修改**:用户点击...
PHP Grid 提供专业外观的 HTML 表格组件功能,提供了基于 Ajax 的编辑、创建、更新和删除操作。支持跨浏览器的即时编辑,支持所有的表单组件,集成搜索工具栏,支持图片显示,导出数据到 HTML 和 Excel ;支持权限...
4. **视图创建**:为每个操作创建视图,使用EasyUI组件构建用户界面,如使用`datagrid`展示数据,`dialog`进行编辑和删除操作。 5. **绑定数据**:控制器将模型数据传递给视图,使用`@model`指令和`@Html`辅助方法...