Use jQuery to add, delete, modify and set the color of odd and even rows in the table-JS Tutorial-php.cn

Use jQuery to add, delete, modify and set the color of odd and even rows in the table

巴扎黑

Release： 2017-08-09 16:08:52

Original

1910 people have browsed it

In the past week, I have learned a little bit of HTML, CSS, and javascript. I used jquery in javascript to complete a simple table operation, with the functions of adding, deleting, and modifying.

The table is divided into three columns. The first column is the student number (ID number), the second column is the student's name, and the third column is the student's age. Enter data in the name and age boxes, and then click "Add" to add data (the ID number will be automatically generated incrementally). Enter the ID number and then enter the new name and age and click "Edit" to modify it. To delete, enter the ID. Just click "Delete" to delete the specified row.

The top of the table will update the number of rows in the current table in time. When entering the ID, it will also dynamically respond and update the content of the name and age input box. Make the program achieve basic operability. The header of the table is color controlled using CSS, and the content in the table is also colored using CSS to set different colors for odd and even rows. This makes the interface more beautiful.

The following is a screenshot:

The complete code is as follows (Win7+ IE9 test passed):

//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()
{
	var tc = $("#tableRowCount");
	tc.html(parseInt(tc.html()) + 1);
}
function DecTableRowCount()
{
	var tc = $("#tableRowCount");
	tc.html(parseInt(tc.html()) - 1);
}
</script>
<script>
$(document).ready(function()
{
  //增加
  $("#AddBtn").click(function() 
  {
    var id=parseInt($("#Table tr:last td:first").html()) + 1;

	var name = $("#Name").val() != "" ? $("#Name").val() : " ";
    var age  = $("#Age").val() != "" ? $("#Age").val() : " ";
	
	//新增加一行
	var appendstr = "<tr>";
	appendstr += "<td>" + id + "</td>";
	appendstr += "<td>" + name + "</td>";
	appendstr += "<td>" + age + "</td>";
	appendstr += "</tr>";
	$("#Table").append(appendstr);
	
	IncTableRowCount();
	SetTableRowColor();
  });
  //编辑
  $("#EditBtn").click(function() 
  {
    //根据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>
<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;
}

Copy after login

The above is the detailed content of Use jQuery to add, delete, modify and set the color of odd and even rows in the table. For more information, please follow other related articles on the PHP Chinese website!