在html借助元素特性存储信息
2015-07-28 22:00
621 查看
背景:比如存在学生选择的CheckBox,希望在CheckBox中同时存储学生的姓名及其所在的城市,比如选择Lily所对应的CheckBox以后,可以获得Lily所在的城市“NewYork”。
html代码如下:
如上代码,s是一个Stu对象,由ID、Name、City和Age四个字段组成,在html代码中,由value来存储学生的姓名,itemid来存储学生所在的城市。
JS代码如下:
如上代码,判断table中的每一个checkbox元素,如果被选中,更新checkedStus变量,显示在$("#checkedStu")元素中。
总结:itemid和其他html属性的赋值和取值的用法一致,在这里单独拿出来讲,是因为可以将该功能集成到如何根据集合动态构建复选框选择控件中。
注意:实际上,可以自定义特性来存储元素信息,特性名称自拟,如下代码:
_mystyle是自定义的特性,不属于button元素,任然可以获取到btn1的_mystyle特性值,代码如下:
但是编译器会报告一个警告,如图:
html代码如下:
<input type="checkbox" id=@s.ID class="stuCheck" value=@s.Name itemid=@s.City onclick="whenStuChecked($(this))"/>
如上代码,s是一个Stu对象,由ID、Name、City和Age四个字段组成,在html代码中,由value来存储学生的姓名,itemid来存储学生所在的城市。
JS代码如下:
function updateCheckedStus() { checkedStus = ""; $("#tableStu").find("input.stuCheck").each(function () { if ($(this).attr("checked") == "checked") { checkedStus += $(this).attr("itemid") + " "; } }); $("#checkedStu").text(checkedStus); }
如上代码,判断table中的每一个checkbox元素,如果被选中,更新checkedStus变量,显示在$("#checkedStu")元素中。
总结:itemid和其他html属性的赋值和取值的用法一致,在这里单独拿出来讲,是因为可以将该功能集成到如何根据集合动态构建复选框选择控件中。
注意:实际上,可以自定义特性来存储元素信息,特性名称自拟,如下代码:
<button id="btn1" _mystyle="zidingyi">点击</button>
_mystyle是自定义的特性,不属于button元素,任然可以获取到btn1的_mystyle特性值,代码如下:
alert($("#btn1").attr('_mystyle'));
但是编译器会报告一个警告,如图:
相关文章推荐
- XHTML学习的重点部分
- XHTML基础
- html随笔
- Shiny应用基础(2):HTML元素产生方法
- HTML入门
- innerHTML,innerText,outHTML的用法及区别详解
- 强制html元素不随窗口缩小而换行
- XHTML基础
- html 横线的代码
- Get和POST表单提交方式详解
- html布局方式:div和table
- html不常见问题汇总
- HTML表格布局实际使用详解
- HTML 表格(2)
- HTML 表格(1)
- 当html页面乱码需要修改编码时
- HTML图片和文字一行时的对齐方式
- html如何在两个button之间天加空格
- HTML 表格
- 【HTML学习】第四章 更丰富的内容标记方法