찾다
웹 프론트엔드JS 튜토리얼DOM 기본 튜토리얼: DOM을 사용하여 양식 제어_기본 지식

지금은 테이블의 CSS 제어에 대해 이야기하지 않겠습니다. 먼저 테이블에서 일반적으로 사용되는 DOM을 공유하겠습니다.

테이블 추가 작업에 일반적으로 사용되는 메서드는 insertRow() 및 insertCell() 메서드입니다.

행은 0부터 계산됩니다. 예:

코드 복사 코드는 다음과 같습니다.
var oTr = document.getElementById("member"). insertRow(2 )

은 두 번째 줄에 새로운 줄을 추가한다는 의미입니다.

코드 복사 코드는 다음과 같습니다.

var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("11월 5일");
aText[3] = document.createTextNode("전갈자리");
aText[4] = document.createTextNode("1038818");
for(var i=0;i var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}

oTr 변수는 테이블에 새 행을 삽입한 다음 insertCell을 사용하여 이 행에 대한 새 데이터를 삽입하고 createTextNode를 사용하여 새 텍스트 노드를 생성한 다음 이를 AppendChild의 oTd에 제공하는 것입니다. oTd는 새 셀입니다. ​

1. 행 삽입(동적으로 표 추가)

코드 복사 코드는 다음과 같습니다.



   
   
        이름
        클래스
        생일
        성좌
        모바일
   

   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
테이블>

2.修改表格的内容

当表格建立后, 可以直接使用HtmlDom对表格进行操작, 比document.getElementById(),document.getElementsByTagName()操작품更为方便。
oTable.rows[i].cell[j]
以上통신행, 셀两个属性轻松访问到表格特特特特以 内容第i行 and第j列(道是从0开始计数), 获得单元格对象后就可以使사용 내부 HTML 유형은 修改翔宇的内容了。
4행 5행이 좋습니다
则可以使用以下代码

复主代码 代码如下:

var oTable = document.getElementById("table1");
oTable.rows[4].cells[5].innerHTML = "좋음";

3.删除表格内容

表格既然有添加、修改、就有删除功能。
表格中删除行使用deleteRow(i)방법,其中i为行号。
表格中删除列使는 tr의 deleteCell(j) 방법을 사용합니다.

复主代码 代码如下: var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

다음 코드는 동적 삭제가 전체 HTML 프레임워크에 영향을 미치지 않거나 테이블에 내용이 많은 경우를 고려하여 테이블의 두 번째 행과 원본 테이블의 세 번째 행의 두 번째 열을 삭제하는 것을 나타냅니다. , 동적삭제, 추가가 가능합니다

코드 복사 코드는 다음과 같습니다.


회원 목록
이삭 W13 6월 24일 1118159
걸윙 W210 9월 16일 처녀자리 1307994
맛 이야기 W15 11월 29일 사수자리 1095245



~                     > > > > ~                        

> > > > >

> > > > >

> > > > >
테이블>



열 삭제





코드 복사


코드는 다음과 같습니다.

함수 deleteColumn(oTable, iNum) {
// 열 함수를 사용자 정의 삭제합니다. 즉, 해당 셀을 한 줄씩 삭제합니다.
for (var i = 0; i oTable.rows[i].deleteCell(iNum);
            }
               window.onload = function() {
              var oTable = document.getElementById("table1");
                   deleteColumn(oTable, 2);
            }

테이블 열을 삭제하려면 DOM에 직접 호출할 수 있는 메서드가 없습니다. deleteColumn() 메서드를 직접 작성해야 합니다. 이 메서드는 두 개의 매개변수를 허용합니다. 하나는 테이블 개체이고 다른 매개변수는 사용자가 사용하는 열입니다. 번호를 삭제하고 싶습니다. 쓰기 방법은 매우 간단합니다. deleteCell() 메서드를 사용하면 각 행에서 해당 셀 삭제 메서드를 실행합니다.

회원 목록
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
css怎么去掉表格重复的边框css怎么去掉表格重复的边框Sep 29, 2021 pm 06:05 PM

在css中,可以使用border-collapse属性来去掉表格中重复的边框,该属性可以设置表格边框是折叠为单一边框还是分开的,只需要将值设置为collapse即可把重叠的边框合并在一起,成为一个边框,实现单线边框的效果。

表格有一条虚线外打印不到怎么办表格有一条虚线外打印不到怎么办Mar 28, 2023 am 11:38 AM

表格有一条虚线外打印不到的解决办法:1、打开excel文件,在打开的页面中点击“打印”;2、在预览页找到“无缩放”,选择调整为一页;3、选择打印机打印文档即可。

使用JavaScript实现表格数据的分页显示使用JavaScript实现表格数据的分页显示Jun 16, 2023 am 10:00 AM

随着数据的不断增长,表格显示变得更加困难。大多数情况下,表格中的数据量过大,导致表格在加载时变得缓慢,而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示,让用户更容易找到自己想要的数据。一、动态创建表格为了使分页功能更加可控,需要动态创建表格。在HTML页面中,添加一个类似于下面的table元素。

Vue文档中的表格勾选和全选函数操作方法Vue文档中的表格勾选和全选函数操作方法Jun 20, 2023 pm 10:33 PM

Vue是一种流行的JavaScript框架,它可以让开发人员轻松地构建交互式、响应式的Web界面。Vue框架提供了一系列的组件和指令,用于构建常见的页面元素,如表格、表单、菜单等。在这篇文章中,我们将探讨Vue文档中的表格勾选和全选函数操作方法。在Vue中,我们可以使用v-model指令将表单元素与Vue实例中的数据进行双向绑定。这使得我们可以轻松地收集用户

Vue3获取DOM节点的方式有哪些Vue3获取DOM节点的方式有哪些May 11, 2023 pm 04:55 PM

1.原生js获取DOM节点:document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组件的实例对象:因为每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用。所以在默认情况下,组件的$refs指向一个空对象。可以先在组件上加上ref="名字",然后通过this.$refs.

wps表格如何按成绩高低排序wps表格如何按成绩高低排序Jun 21, 2023 am 09:30 AM

wps表格按成绩高低排序的方法:1、打开wps表格,点击菜单栏中的“开始”按钮;2、点击工具栏中的“排序”选项;3、在下拉菜单中点击“降序”选项;4、在“给出排序依据”下点击“扩展选定区域”,然后点击“排序”按钮即可按成绩高低排序。

PHP中的DOM操作指南PHP中的DOM操作指南May 21, 2023 pm 04:01 PM

在网页开发中,DOM(DocumentObjectModel)是一个非常重要的概念。它可以让开发者轻松地对一个网页的HTML或XML文档进行修改和操作,比如添加、删除、修改元素等。而PHP中内置的DOM操作库也为开发者提供了丰富的功能,本文将介绍PHP中的DOM操作指南,希望可以帮助到大家。DOM的基本概念DOM是一个跨平台、独立于语言的API,它可以将

vue3中ref绑定dom或组件失败的原因是什么及怎么解决vue3中ref绑定dom或组件失败的原因是什么及怎么解决May 12, 2023 pm 01:28 PM

vue3ref绑定dom或者组件失败原因分析场景描述在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了相关组件,但是经常ref绑定失败的情况。ref绑定失败情况举例ref绑定失败的绝大多数情况是,在ref和组件绑定的时候,该组件还未渲染,所以绑定失败。或者组件刚开始未渲染,ref未绑定,当组件开始渲染,ref也开始绑定,但是ref和组件并未绑定完成,这个时候使用组件相关的方法就会出现问题。ref绑定的组件使用了v-if,或者他的父组件使用了v-if导致页面

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기