jquery 表格的增加删除和修改及设置奇偶行颜色(3)

来源:未知 责任编辑:责任编辑 发表时间:2013-12-01 14:20 点击:

  { 
    //根据id查找到指定行 
    var i=SearchIdInTable($("#Table tr"), $("#id").val()); 
    if (i != -1) 
    { 
        //得到新内容 
        var name = $("#Name").val() != "" ? $("#Name").val() : " "; 
        var age  = $("#Age").val() != "" ? $("#Age").val() : " "; 
         
        //修改该行的二列数据 
        $("#Table tr:eq(" + i + ") td:eq(1)").html(name); 
        $("#Table tr:eq(" + i + ") td:eq(2)").html(age); //parseInt(age)也可以 
    } 
  }); 
  //删除 
  $("#DeleteBtn").click(function() 
  { 
    //根据id查找到指定行 
    var i=SearchIdInTable($("#Table tr"), $("#id").val()); 
    if (i != -1) 
    {    
        //删除表格中该行 
        $("#Table tr:eq(" + i + ")").slideUp("slow"); 
        $("#Table tr:eq(" + i + ")").remove(); 
         
        DecTableRowCount(); 
        SetTableRowColor();  
    } 
  }); 
}); 
</script> 
</head> 
<body> 
<p>简单的表格操作,有增加、删除和修改功能。id输入框能动态响应输入</p> 
id:<input type="text" id="id" /> 
Name:<input type="text" id="Name" /> 
Age:<input type="text" id="Age" /> 
<input type="button" id="AddBtn" value="Add" /> 
<input type="button" id="EditBtn" value="Edit" /> 
<input type="button" id="DeleteBtn" value="Delete" /> 
<table id="Table" align="center" border="2" cellpadding="10" cellspacing="1" bordercolor="#FFAA00"> 
<caption style="font-size:15px">学生表<label id="tableRowCount"></label></caption> 
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • Gb2312转utf-8编码的方法(vbs+js)
  • 如何使用Ajax技术开发Web应用程序(1)
  • js跳转路径问题
  • JavaScript模仿桌面窗口
  • 用js检测两个线段是否相交
  • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
  • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
  • 我是如何去了解jquery的(六),案例之幻灯片轮换
  • Jquery封装幻灯片效果
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1