jQuery를 사용하여 테이블의 홀수 및 짝수 행을 추가, 삭제, 수정 및 색상 설정
- 巴扎黑원래의
- 2017-08-09 16:08:521915검색
지난 주에 HTML, CSS, javascript를 조금 배웠습니다. javascript에서 jquery를 사용하여 추가, 삭제, 수정 기능으로 간단한 테이블 작업을 완료했습니다.
테이블은 세 개의 열로 구분됩니다. 첫 번째 열은 학생 번호(ID 번호), 두 번째 열은 학생 이름, 세 번째 열은 학생의 나이입니다. 이름과 나이 입력란에 데이터를 입력한 후 '추가'를 클릭하면 데이터가 추가됩니다. (ID 번호는 자동으로 증분 생성됩니다.) ID 번호를 입력한 후 새로운 이름과 나이를 입력하고 '수정'을 클릭하면 수정됩니다. 삭제하려면 해당 ID를 입력하세요. "삭제"를 클릭하면 지정된 행이 삭제됩니다.
테이블 상단에는 현재 테이블의 행 수가 시간에 따라 업데이트됩니다. ID를 입력하면 이름과 나이 입력 상자의 내용도 동적으로 응답하여 업데이트됩니다. 프로그램이 기본적인 조작성을 갖도록 하십시오. 테이블의 헤더 색상은 CSS를 사용하여 제어되며, 테이블의 내용도 CSS를 사용하여 색상이 지정되어 홀수 행과 짝수 행에 서로 다른 색상을 설정합니다. 이는 인터페이스를 더욱 아름답게 만듭니다.
다음은 스크린샷입니다:
전체 코드는 다음과 같습니다(Win7+IE9 테스트 통과):
//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;
}
위 내용은 jQuery를 사용하여 테이블의 홀수 및 짝수 행을 추가, 삭제, 수정 및 색상 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.