jquery控制table中的input样式,巧妙利用标签元素,隐藏input边框

原创 2013年12月04日 13:54:48

直接进入主题:jsp页面源代码

<style>

.ge_table{ width:100%;}
.ge_table td{ height:44px; line-height:26px;}
.hide_border{border: 0px;padding-left: 5px;line-height: 26px;width:205px;height: 26px;}
.ge_input{border:1px solid #ccc;padding-left:5px;line-height:26px;width:205px; height:26px;}

</style>

<table cellpadding="0" cellspacing="0" border="0" class="ge_table">

<tr>
<td>收货地址:</td>
<td><select id="province" onchange="selCity()" class="cursor"><option
value="0" selected="selected">请选择</option>
<c:forEach items="${province}" var="province">
<option value="${province.zoneCode}">${province.zoneName}</option>
</c:forEach>
</select> <select id="city" onchange="selArea()" class="cursor">
<option value="0">请选择</option>
</select> <select id="area" onchange="selectArea()" class="cursor">
<option value="0">请选择</option>
</select>
</td>
</tr> 
<tr>
<td>收货人姓名:</td>
<td >
<input type="text" class="ge_input" id="inputConsignee" onblur="checkConsignee()" />
<p id="consigneeMsg"></p>
</td>
</tr>
<tr>
<td class="td"><input type="button" class="button2"
id="sure" onclick="makeSure()" value="确认" /> <input
type="button" class="button2" id="cancle" value="修改"
onclick="updateMsg()" /></td>
</tr>

</table>

点击确定按钮调用方法: 

function makeSure() {
     $("#province").attr("disabled", true);
     $("#city").attr("disabled", true);
     $("#area").attr("disabled", true);
    $("input.ge_input").each(function(){
          $(this).removeClass().addClass("hide_border").attr("readonly",true);
     });

}

点击修改按钮调用方法:

function updateMsg(){
    $("input.hide_border").each(function(){
          $(this).removeClass().addClass("ge_input").attr("readonly",false);
     });
}

点击确定按钮之前页面效果:

点击确定按钮之后效果:



点击修改按钮之后,页面效果返回如图一。

javascript将table的td变为可编辑的input,实现表格动态编辑

很多场景都会遇到再网页上,用户喜欢像用excel一样,直接对html的table内容进行操作,所以写了个方便使用的插件   csdn下载地址 :http://download.csdn.net/de...
  • w172087242
  • w172087242
  • 2016年07月29日 11:53
  • 6071

JQuery控制input的隐藏和显示

radio: 选择类型: 出差   ...
  • hdblocal
  • hdblocal
  • 2016年04月06日 16:10
  • 5320

Jquery获取表格当前行中其他列中的值和input输入框中的值

Jquery获取表格当前行中其他列的值和其他列中input输入框中的值
  • Scaarf
  • Scaarf
  • 2017年05月01日 01:51
  • 5148

html学习 - 元素隐藏/显示和input隐藏

元素隐藏在html中我们经常需要把某些元素隐藏起来,有时候我们需要临时隐藏页面,让其他元素显示,来完成操作。有时候有些信息我们需要传给js,但是又不想给用户看,所以也会隐藏起来。display/vis...
  • chenfs1992
  • chenfs1992
  • 2015年04月07日 12:29
  • 3603

table单元格和input的完美结合,兼容IE和火狐

#formTitle("grid配置")     var curSrc=null;          function checkUpdate111(){         var groupId ...
  • rnZuoZuo
  • rnZuoZuo
  • 2014年03月19日 00:24
  • 943

HTML5去除input [type=search] 的默认边框和删除按钮

input [type=search]  是HTML新属性 , 定义用于搜索的文本字段; x-webkit-speech  属性:在GOOGLE浏览器上  还会显示一个小话筒  au...
  • myweishanli
  • myweishanli
  • 2014年03月28日 15:29
  • 8075

javascript将table的td变为可编辑的input,实现表格动态编辑

很多场景都会遇到再网页上,用户喜欢像用excel一样,直接对html的table内容进行操作,所以写了个方便使用的插件   csdn下载地址 :http://download.csdn.net/de...
  • w172087242
  • w172087242
  • 2016年07月29日 11:53
  • 6071

去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

去除input的边框 去除input获取焦点时的蓝色外边框** 去除input的边框仅仅用border属性 ,其实是不能满足我们的需求的 此外还需要加上outline属性才可以 实现我们想要的样式 ...
  • sunrainamazing
  • sunrainamazing
  • 2017年05月12日 18:34
  • 7357

easy-ui的input框联动效果js实现代码.

当我们没有选择计量器具类别,其他三个input是空的, 当我们只有选择计量器具类别过后,才能去动态显示其他三个input的下拉选值. 下面是js的代码实现:             //计量器...
  • liugh_xian2016
  • liugh_xian2016
  • 2016年08月15日 11:03
  • 2723

html 中表单元素input type="hidden"的作用

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用,下面为大家详细介绍下此隐藏域在实际中时如何使用的,感兴趣的朋友不要错过了哈 基本语法:   ...
  • kuangruike
  • kuangruike
  • 2016年08月05日 11:27
  • 17368
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery控制table中的input样式,巧妙利用标签元素,隐藏input边框
举报原因:
原因补充:

(最多只允许输入30个字)