jquery 表格的增加删除和修改及设置奇偶行颜色(4)
来源：未知 责任编辑：责任编辑 发表时间:2013-12-01 14:20 点击:次
<th>id</th><th>Name</th><th>Age</th>
<tr> <td>1</td> <td>MoreWindows</td> <td>24</td> </tr>
<tr> <td>2</td> <td>MW</td> <td>19</td> </tr>
</table>
</body>
</html>
<!-- css控制表头的背景颜色 css 双重标签 派生选择器-->
<style>
#Table th
{
background-color:#7cfc00;
}
//by MoreWindows (http://blog.csdn.net/MoreWindows)
<html>
<head>
<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function()
{
SetTableRowColor();
UpdataTableRowCount();
if ($.browser.msie) //判断是不是MS的ie浏览器
{
$("#id").bind("propertychange", function(){IDInputChange();});
}
else
{
document.getElementById("#id").addEventListener("input", IDInputChange, false);
}
});
</script>
<script>
//根据ID输入框的值取表格中对应内容并填充到姓名年龄的输入框中
function IDInputChange()
{
//根据id查找到指定行
var i=SearchIdInTable($("#Table tr"), $("#id").val());
if (i != -1)
{
//得到该行的数据
var name = $("#Table tr:eq(" + i + ") td:eq(1)").html();
var age = $("#Table tr:eq(" + i + ") td:eq(2)").html();
//将数据更新到对应的文本框中
$("#Name").val(name);
$("#Age").val(age);
}
else
{
$("#Name").val("");
$("#Age").val("");
}
}
//在表格的第一列中查找等于指定ID的行
function SearchIdInTable(tablerow, findid)
{
var i;
var tablerownum=tablerow.length;
for (i=1; i<tablerownum; i++)
if ($("#Table tr:eq(" + i + ") td:eq(0)").html() == findid)
return i;
return -1;
}
//用CSS控制奇偶行的颜色
function SetTableRowColor()
{
$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
//更新表格当前显示的行数
function UpdataTableRowCount()
{
$("#tableRowCount").html($("#Table tr").length - 1);
}
function IncTableRowCount()
相关新闻>>
最新推荐更多>>>
- 发表评论
-
- 最新评论 更多>>
