javascript_javascript 기술을 사용하여 전체 선택, 반전 선택 및 삭제 테이블을 구현하는 방법
이 글의 예시에서는 전체 선택, 선택 반전, 테이블 삭제를 위한 자바스크립트 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以全选反选删除的表格</title>
<style type="text/css">
body,table
{
margin:0;
padding:0;
font-size:14px;
}
table,tr,th,td
{
border:1px solid #cdc;
}
th
{
background-color:green;
width:100px;
}
.oddColor
{
background-color:#ccc;
}
.evenColor
{
background-color:#fcf;
}
.overColor
{
background-color:#dff;
}
</style>
<script type="text/javascript">
//定义嵌套数组
var datas = [["张三", 30, "南昌"], ["李四", 25, "北京"], ["王五", 20, "郑州"],
["赵六", 19, "武汉"], ["李莫", 18, "深圳"], ["罗成", 33, "重庆"],
["王平", 31, "天津"], ["刘萍", 22, "上海"], ["杨丽", 17, "石家庄"],
["郭丽", 30, "广州"]];
//动态创建表格
function CreateMyTable() {
var tblMain = document.getElementById("tblMain");
var rowsCount = tblMain.rows.length;
var addRow;
var addCol;
var detailInfos;
for (var i = 0; i < datas.length; i++) {
addRow = tblMain.insertRow(rowsCount - 1);//控制数据行添加到倒数第二列
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='checkbox' name='item' />";
addCol.align = "center"; //控制列居中
detailInfos = datas[i];
for (var j = 0; j < detailInfos.length; j++) {
addCol = addRow.insertCell(-1);
addCol.innerHTML = detailInfos[j];
}
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='button' id='btnDel" + i + "' value='删除' onclick='btnDel(this)' />";
addCol.align = "center"; //控制列居中
rowsCount++;
}
TableColor();
}
//设置网格间隔色和高亮显示
var oldClassName; //记住行的背景色
function TableColor() {
var tblMain = document.getElementById("tblMain");
var rowNodes = tblMain.rows;
for (var i = 1; i < rowNodes.length-1; i++) { //除去首行和末行
if (i % 2 == 0) {
rowNodes[i].className = "evenColor";
}
else {
rowNodes[i].className = "oddColor";
}
rowNodes[i].onmouseover = function () {
oldClassName = this.className;
this.className = "overColor";
}
rowNodes[i].onmouseout = function () {
this.className = oldClassName;
}
}
}
//复选框全选函数
function checkAll() {
var currentCheckNode = event.srcElement;
var checkAllNodes = document.getElementsByName("all");
//把没有点击的全选复选框去除复选
for (var i = 0; i < checkAllNodes.length; i++) {
if (currentCheckNode != checkAllNodes[i]) {
checkAllNodes[i].checked = false;
}
}
var checkItemNodes = document.getElementsByName("item");
for (var i = 0; i < checkItemNodes.length; i++) {
checkItemNodes[i].checked = currentCheckNode.checked;
}
}
//按钮选择函数
function btnCheckboxSel(index) {
var checkItemNodes = document.getElementsByName("item");
for (var i = 0; i < checkItemNodes.length; i++) {
if (index == 2) {
checkItemNodes[i].checked = !checkItemNodes[i].checked;
}
else {
checkItemNodes[i].checked = index;
}
}
}
//每行的删除按钮函数
function btnDel(btn) {
var tblMain = document.getElementById("tblMain");
var delRowNode = btn.parentNode.parentNode;
var sMsg = "您是否要删除 姓名为:【" + delRowNode.cells[1].innerText + "】,年龄为:【" +
delRowNode.cells[2].innerText + "】,城市为:【" +
delRowNode.cells[3].innerText + "】 的数据?";
if (window.confirm(sMsg)) {
tblMain.tBodies[0].removeChild(delRowNode);
TableColor();
}
}
//删除所选项按钮函数
function btnDelSelectRow() {
var arrDel = new Array();
var pos = 0;
var itemNodes = document.getElementsByName("item");
for (var i = 0; i < itemNodes.length; i++) {
if (itemNodes[i].checked) {
arrDel[pos] = itemNodes[i].parentNode.parentNode;
pos++;
}
}
if (pos <= 0) {
return;
}
if (!window.confirm("是否要删除选择的数据?"))
return;
var tblMain = document.getElementById("tblMain");
for (var i = 0; i < arrDel.length; i++) {
tblMain.tBodies[0].removeChild(arrDel[i]);
}
}
window.onload = CreateMyTable;
</script>
</head>
<body>
<table id="tblMain" cellspacing="0" cellpadding="10px" align="center">
<tbody>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="all" onclick="checkAll()" />全选</th>
<th colspan="4">
<input type="button" value="全选" onclick="btnCheckboxSel(1)" />
<input type="button" value="全清" onclick="btnCheckboxSel(0)" />
<input type="button" value="反选" onclick="btnCheckboxSel(2)" />
<input type="button" value="删除所选项" onclick="btnDelSelectRow()" />
</th>
</tr>
</tbody>
</table>
</body>
</html>이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7480
15
1377
52
77
11
51
19
19
33
PPT 표에 삽입된 그림의 형식을 조정하는 단계
Mar 26, 2024 pm 04:16 PM
1. 예시처럼 새 PPT 파일을 만들고 이름을 [PPT Tips]로 지정합니다. 2. [PPT 팁]을 더블클릭하여 PPT 파일을 엽니다. 3. 예를 들어 행 2개와 열 2개로 구성된 표를 삽입합니다. 4. 테이블 테두리를 더블클릭하면 상단 툴바에 [디자인] 옵션이 나타납니다. 5. [음영] 옵션을 클릭한 후 [그림]을 클릭하세요. 6. [그림]을 클릭하면 그림을 배경으로 채우기 옵션 대화 상자가 나타납니다. 7. 디렉토리에서 삽입하려는 트레이를 찾은 후 확인을 클릭하여 그림을 삽입하세요. 8. 테이블 상자를 마우스 오른쪽 버튼으로 클릭하여 설정 대화 상자를 불러옵니다. 9. [셀 서식]을 클릭하고 [이미지를 음영으로 배열]을 선택하세요. 10. [중앙], [미러] 및 기타 필요한 기능을 설정한 후 확인을 클릭하세요. 참고: 기본값은 테이블에 그림을 채우는 것입니다.
Xiaohongshu 메모를 삭제하는 방법
Mar 21, 2024 pm 08:12 PM
Xiaohongshu 메모를 삭제하는 방법 Xiaohongshu 앱에서 메모를 편집할 수 있습니다. 다음으로 편집기는 Xiaohongshu 메모 삭제 방법에 대한 사용자 사진과 텍스트를 가져옵니다. 보세요! Xiaohongshu 사용 튜토리얼 Xiaohongshu 메모 삭제 방법 1. 먼저 Xiaohongshu 앱을 열고 메인 페이지로 들어가서 오른쪽 하단에 있는 [Me]를 선택하여 특별 영역으로 들어갑니다. 2. 그런 다음 내 영역에서 다음과 같이 메모 페이지를 클릭합니다. 3. 노트 페이지에 들어가서 오른쪽 상단에 있는 [점 3개]를 클릭합니다. 4. 마지막으로 기능 표시줄이 하단에 확장되고 [삭제]를 클릭하여 완료합니다.
WeChat에서 차단 및 삭제되어 영구적으로 추가될 수 없다는 것이 사실인가요?
Apr 08, 2024 am 11:41 AM
1. 우선, 누군가를 영구 차단 및 삭제하고 영구 추가하지 않는 것은 허위입니다. 상대방을 차단하고 삭제한 후 추가하려면 상대방의 동의만 있으면 됩니다. 2. 사용자가 누군가를 차단하면 상대방은 해당 사용자에게 메시지를 보낼 수 없고, 사용자의 친구 서클을 볼 수 없으며, 사용자와 통화할 수 없습니다. 3. 차단은 사용자의 WeChat 연락처 목록에서 상대방을 삭제하는 것을 의미하지 않습니다. 4. 상대방을 차단한 후 자신의 위챗 연락처 목록에서 상대방을 삭제한 경우, 삭제 후 복구할 수 있는 방법이 없습니다. 5. 상대방을 다시 친구로 추가하려면 상대방이 동의한 후 다시 친구를 추가해야 합니다.
판매 예측 테이블을 만드는 방법
Mar 20, 2024 pm 03:06 PM
능숙하게 양식을 작성할 수 있다는 것은 회계, 인사, 재무에 필요한 기술일 뿐만 아니라 많은 영업사원에게도 매우 중요합니다. 왜냐하면 매출과 관련된 데이터는 매우 크고 복잡하며, 문제를 설명하기 위해 단순히 문서에 기록할 수는 없기 때문입니다. 더 많은 영업사원들이 엑셀을 능숙하게 활용하여 테이블을 만들 수 있도록 편집자가 판매예측에 관한 테이블 만들기 이슈를 소개합니다. 1. [매출 예측 및 목표 설정], xlsm을 열어 각 테이블에 저장된 데이터를 분석합니다. 2. 새로운 [빈 워크시트]를 생성하고 [셀]을 선택한 후 [라벨 정보]를 입력하세요. 아래로 [드래그]하여 달을 [채우세요]. [기타] 데이터를 입력한 후 [
Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 삭제 후 복구하는 방법은 무엇입니까?
Mar 21, 2024 pm 05:10 PM
인기 있는 소셜 전자상거래 플랫폼인 Xiaohongshu는 일상생활과 쇼핑 경험을 공유하기 위해 많은 사용자를 끌어 모았습니다. 때때로 당사는 개인 이미지를 더 잘 유지하거나 플랫폼 규정을 준수하기 위해 적시에 삭제해야 하는 일부 부적절한 콘텐츠를 실수로 게시할 수 있습니다. 1. Xiaohongshu 릴리스를 삭제하는 방법은 무엇입니까? 1. Xiaohongshu 계정에 로그인하고 개인 홈페이지에 들어갑니다. 2. 개인 홈페이지 하단의 '내 창작물' 옵션을 찾아 클릭하여 입장합니다. 3. "내 창작물" 페이지에서는 노트, 동영상 등 게시된 모든 콘텐츠를 볼 수 있습니다. 4. 삭제가 필요한 콘텐츠를 찾아 오른쪽에 있는 "..." 버튼을 클릭하세요. 5. 팝업 메뉴에서 "삭제" 옵션을 선택하세요. 6. 삭제 확인 후 해당 콘텐츠는 개인 홈페이지 및 공개 페이지에서 사라집니다.
조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계
Mar 27, 2024 pm 07:30 PM
1. 워크시트를 열고 [시작]-[조건부 서식] 버튼을 찾습니다. 2. 열 선택을 클릭하고 조건부 서식을 추가할 열을 선택합니다. 3. [조건부 서식] 버튼을 클릭하면 옵션 메뉴가 나타납니다. 4. [조건부규칙 강조]-[사이]를 선택하세요. 5. 20, 24, 진한 녹색 텍스트와 어두운 채우기 색상 규칙을 입력합니다. 6. 확인 후, 선택한 열의 데이터는 설정에 따라 해당 숫자, 텍스트 및 셀 상자로 색상이 지정됩니다. 7. 충돌하지 않는 조건부 규칙은 반복적으로 추가할 수 있지만, 충돌하는 규칙의 경우 WPS는 이전에 설정된 조건부 규칙을 마지막에 추가된 규칙으로 대체합니다. 8. [사이] 규칙 20-24 및 [보다 작음] 20 뒤에 셀 열을 반복적으로 추가합니다. 9. 규칙을 변경해야 하는 경우 규칙을 삭제한 다음 규칙을 재설정하면 됩니다.
WeChat 파일 전송 도우미를 완전히 삭제하는 방법_WeChat 파일 전송 도우미를 닫는 방법 소개
Mar 20, 2024 pm 08:31 PM
WeChat의 파일 전송 도우미는 모든 사용자가 사용할 수 있습니다. 일부 사용자는 이를 메모로 사용하여 일부 내용을 기록합니다. 그렇다면 WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 아래에서 자세히 소개해드리겠습니다. WeChat 파일 전송 도우미를 완전히 삭제하는 방법은 무엇입니까? 답변: [WeChat]-[파일 전송 도우미 길게 누르기]-[이 채팅 삭제]. 구체적인 단계: 1. 먼저 홈 페이지에 들어간 후 [파일 전송 도우미]를 찾아 길게 누릅니다. 2. 그러면 팝업이 읽지 않음으로 표시되고 채팅을 상단에 고정합니다. 채팅을 표시하지 않고 채팅을 삭제합니다. 여기에서 [이 채팅 삭제]를 클릭할 수 있습니다.
TikTok 채팅 기록을 완전히 삭제하는 방법
May 07, 2024 am 11:14 AM
1. Douyin 앱을 열고 인터페이스 하단의 [메시지]를 클릭한 후 삭제해야 하는 채팅 대화 항목을 클릭합니다. 2. 채팅 기록 중 하나를 길게 누른 후 [복수 선택]을 클릭하고 삭제하려는 채팅 기록을 선택하세요. 3. 해당 기록을 영구 삭제하려면 오른쪽 하단의 [삭제] 버튼을 클릭한 후 팝업창에서 [삭제 확인]을 선택하세요.
