Verwenden Sie jQuery, um ungerade und gerade Zeilen in der Tabelle hinzuzufügen, zu löschen, zu ändern und deren Farbe festzulegen-js-Tutorial-php.cn

Verwenden Sie jQuery, um ungerade und gerade Zeilen in der Tabelle hinzuzufügen, zu löschen, zu ändern und deren Farbe festzulegen

巴扎黑

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

Original

1943 Leute haben es durchsucht

In der letzten Woche habe ich ein wenig HTML, CSS und Javascript gelernt. Ich habe JQuery in Javascript verwendet, um eine einfache Tabellenoperation mit den Funktionen Hinzufügen, Löschen und Ändern durchzuführen.

Die Tabelle ist in drei Spalten unterteilt. Die erste Spalte ist die Studentennummer (ID-Nummer), die zweite Spalte ist der Name des Studenten und die dritte Spalte ist das Alter des Studenten. Geben Sie Daten in die Felder „Name“ und „Alter“ ein und klicken Sie dann auf „Hinzufügen“, um Daten hinzuzufügen (die ID-Nummer wird automatisch inkrementell generiert. Geben Sie die ID-Nummer ein, geben Sie dann den neuen Namen und das Alter ein und klicken Sie auf „Bearbeiten“, um sie zu ändern). Zum Löschen geben Sie einfach die ID ein, um die angegebene Zeile zu löschen.

Oben in der Tabelle wird die Anzahl der Zeilen in der aktuellen Tabelle rechtzeitig aktualisiert. Bei der Eingabe der ID wird auch dynamisch reagiert und der Inhalt der Namens- und Alterseingabe aktualisiert Kasten. Stellen Sie sicher, dass das Programm eine grundlegende Bedienbarkeit erreicht. Die Farbe der Kopfzeile der Tabelle wird mithilfe von CSS gesteuert, und der Inhalt der Tabelle wird ebenfalls mithilfe von CSS eingefärbt, um unterschiedliche Farben für ungerade und gerade Zeilen festzulegen. Dadurch wird die Benutzeroberfläche schöner.

Das Folgende ist ein Screenshot:

Der vollständige Code ist wie folgt folgt (Win7+ IE9-Test bestanden):

//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;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um ungerade und gerade Zeilen in der Tabelle hinzuzufügen, zu löschen, zu ändern und deren Farbe festzulegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!