웹 프론트엔드 JS 튜토리얼 Javascript 병합 테이블 셀 예제 code_javascript 기술

Javascript 병합 테이블 셀 예제 code_javascript 기술

May 16, 2016 pm 03:22 PM
javascript 병합 시트

이 기사에서는 셀을 병합할 수 있는 인터넷의 코드 예제를 소개합니다. 이 코드가 필요한 친구들에게 도움이 되기를 바랍니다.
코드 예시는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>表格单元格合并代码</title>
<script type="text/javascript"> 
function autoRowSpan(tb,row,col){ 
 var lastValue=""; 
 var value=""; 
 var pos=1; 
 for(var i=row;i<tb.rows.length;i++){ 
 value=tb.rows[i].cells[col].innerText; 
 if(lastValue==value){ 
  tb.rows[i].deleteCell(col); 
  tb.rows[i-pos].cells[col].rowSpan=tb.rows[i-pos].cells[col].rowSpan+1; 
  pos++; 
 }
 else{ 
  lastValue=value; 
  pos=1; 
 } 
 } 
} 
window.onload=function(){
 var tb=document.getElementById("tb");
 autoRowSpan(tb,0,0)
}
</script>
</head>
<body>
<table id="tb" border="1">
 <thead>
 <tr >
  <td>国家</td>
  <td>地区</td>
 </tr>
 </thead>
 <tr>
 <td>中国</td>
 <td>河南</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>四川</td>
 </tr>
 <tr>
 <td>中国</td>
 <td>北京</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>纽约</td>
 </tr>
 <tr>
 <td>美国</td>
 <td>洛杉矶</td>
 </tr>
 <tr>
 <td>英国</td>
 <td>伦敦</td>
 </tr>
</table>
</body>
</html>
로그인 후 복사

다음 단락을 공유하겠습니다.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>合并表格</title> 
<script> 
/////////////////////////////////////////////// 
//功能:合并表格 
//参数:tb-需要合并的表格ID 
//参数:colLength--需要对前几列进行合并,比如, 
//想合并前两列,后面的数据列忽略合并,colLength应为2 
//缺省表示对全部列合并 
//data:2011.11.06 
/////////////////////////////////////////////// 
function uniteTable(tb,colLength){ 
//检查表格是否规整 
if(!checkTable(tb)) return; 
var i=0; 
var j=0; 
var rowCount=tb.rows.length; //行数 
var colCount=tb.rows[0].cells.length; //列数 
var obj1=null; 
var obj2=null; 
//为每个单元格命名 
for(i=0;i<rowCount;i++){ 
for(j=0;j<colCount;j++){ 
tb.rows[i].cells[j].id="tb__" + i.toString() + "_" + j.toString(); 
} 
} 
//逐列检查合并 
for(i=0;i<colCount;i++){ 
if(i==colLength) return; 
obj1=document.getElementById("tb__0_"+i.toString()) 
for(j=1;j<rowCount;j++){ 
obj2=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
if(obj1.innerText==obj2.innerText){ 
obj1.rowSpan++; 
obj2.parentNode.removeChild(obj2); 
}else{ 
obj1=document.getElementById("tb__"+j.toString()+"_"+i.toString()); 
} 
} 
} 
} 

///////////////////////////////////////// 
//功能:检查表格是否规整 
//参数:tb--需要检查的表格ID 
//data: 2011.11.06
///////////////////////////////////////// 
function checkTable(tb){ 
if(tb.rows.length==0) return false; 
if(tb.rows[0].cells.length==0) return false; 
for(var i=0;i<tb.rows.length;i++){ 
if(tb.rows[0].cells.length!=tb.rows[i].cells.length) return false; 
} 
return true; 
} 
</script> 
</head> 
<body> 
<table width="400" border="1" id="table1"> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>200</td>
<td>1</td> 
</tr> 
<tr> 
<td>a</td> 
<td>for</td> 
<td>100</td> 
<td>300</td> 
<td>2</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>100</td> 
<td>200</td> 
<td>3</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>300</td> 
<td>230</td> 
<td>4</td> 
</tr> 
<tr> 
<td>a</td> 
<td>if</td> 
<td>320</td> 
<td>230</td> 
<td>5</td> 
</tr> 
</table> 
<br><input type="button" value="合并表格" onClick="uniteTable(table1,4)"> 
</body> 
</html>
로그인 후 복사

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

PPT 표에 삽입된 그림의 형식을 조정하는 단계 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. [중앙], [미러] 및 기타 필요한 기능을 설정한 후 확인을 클릭하세요. 참고: 기본값은 테이블에 그림을 채우는 것입니다.

판매 예측 테이블을 만드는 방법 판매 예측 테이블을 만드는 방법 Mar 20, 2024 pm 03:06 PM

능숙하게 양식을 작성할 수 있다는 것은 회계, 인사, 재무에 필요한 기술일 뿐만 아니라 많은 영업사원에게도 매우 중요합니다. 왜냐하면 매출과 관련된 데이터는 매우 크고 복잡하며, 문제를 설명하기 위해 단순히 문서에 기록할 수는 없기 때문입니다. 더 많은 영업사원들이 엑셀을 능숙하게 활용하여 테이블을 만들 수 있도록 편집자가 판매예측에 관한 테이블 만들기 이슈를 소개합니다. 1. [매출 예측 및 목표 설정], xlsm을 열어 각 테이블에 저장된 데이터를 분석합니다. 2. 새로운 [빈 워크시트]를 생성하고 [셀]을 선택한 후 [라벨 정보]를 입력하세요. 아래로 [드래그]하여 달을 [채우세요]. [기타] 데이터를 입력한 후 [

조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계 조건에 따라 자동으로 색상이 변경되도록 WPS 값을 설정하는 방법_조건에 따라 자동으로 색상이 변경되도록 WPS 테이블 값을 설정하는 단계 Mar 27, 2024 pm 07:30 PM

1. 워크시트를 열고 [시작]-[조건부 서식] 버튼을 찾습니다. 2. 열 선택을 클릭하고 조건부 서식을 추가할 열을 선택합니다. 3. [조건부 서식] 버튼을 클릭하면 옵션 메뉴가 나타납니다. 4. [조건부규칙 강조]-[사이]를 선택하세요. 5. 20, 24, 진한 녹색 텍스트와 어두운 채우기 색상 규칙을 입력합니다. 6. 확인 후, 선택한 열의 데이터는 설정에 따라 해당 숫자, 텍스트 및 셀 상자로 색상이 지정됩니다. 7. 충돌하지 않는 조건부 규칙은 반복적으로 추가할 수 있지만, 충돌하는 규칙의 경우 WPS는 이전에 설정된 조건부 규칙을 마지막에 추가된 규칙으로 대체합니다. 8. [사이] 규칙 20-24 및 [보다 작음] 20 뒤에 셀 열을 반복적으로 추가합니다. 9. 규칙을 변경해야 하는 경우 규칙을 삭제한 다음 규칙을 재설정하면 됩니다.

Excel에서 선행 0이 제거되지 않도록 하는 방법 Excel에서 선행 0이 제거되지 않도록 하는 방법 Feb 29, 2024 am 10:00 AM

Excel 통합 문서에서 선행 0을 자동으로 제거하는 것이 불편합니까? 셀에 숫자를 입력하면 Excel에서 숫자 앞의 0을 제거하는 경우가 많습니다. 기본적으로 명시적인 서식이 없는 셀 항목은 숫자 값으로 처리됩니다. 선행 0은 일반적으로 숫자 형식과 관련이 없는 것으로 간주되므로 생략됩니다. 또한 앞에 0이 있으면 특정 수치 연산에서 문제가 발생할 수 있습니다. 따라서 0은 자동으로 제거됩니다. 이 문서에서는 계좌 번호, 우편 번호, 전화 번호 등과 같이 입력된 숫자 데이터가 올바른 형식인지 확인하기 위해 Excel에서 앞에 오는 0을 유지하는 방법을 설명합니다. Excel에서 숫자 앞에 0이 있도록 허용하는 방법은 무엇입니까? Excel 통합 문서에서 숫자의 앞에 오는 0을 유지할 수 있으며 선택할 수 있는 방법은 여러 가지가 있습니다. 다음과 같이 셀을 설정할 수 있습니다.

Word 표를 합산하는 방법을 알고 있나요? Word 표를 합산하는 방법을 알고 있나요? Mar 21, 2024 pm 01:10 PM

때때로 Word 테이블에서 계산 문제가 발생하는 경우가 많습니다. 일반적으로 이러한 문제가 발생하면 대부분의 학생들은 계산을 위해 Word 테이블을 복사하고 일부 학생들은 자동으로 계산기를 사용합니다. 빨리 계산하는 방법이 있나요? 물론, 실제로 합계는 Word에서도 계산할 수 있습니다. 그럼 어떻게 하는지 아시나요? 오늘은 함께 살펴보시죠! 더 이상 고민하지 말고, 도움이 필요한 친구들은 빨리 수집해야 합니다! 단계 세부사항: 1. 먼저 컴퓨터에서 Word 소프트웨어를 열고 처리해야 하는 문서를 엽니다. (그림 참조) 2. 다음으로 합산된 값이 있는 셀에 커서를 놓고(그림 참조) [메뉴 모음]을 클릭합니다.

WPS는 하나의 셀을 두 개로 나눕니다. WPS는 하나의 셀을 두 개로 나눕니다. Mar 20, 2024 pm 06:00 PM

WPS 소프트웨어는 텍스트 및 문서 처리에 없어서는 안될 도우미입니다. 실제 응용 프로그램에서는 텍스트 및 문서를 처리하기 위해 셀에서 작업해야 하는 경우가 많습니다. 오늘은 WPS에서 셀을 둘로 나누는 구체적인 단계를 소개하겠습니다. 1. 먼저 편집해야 할 WPS 테이블을 열고 두 개의 셀로 나누어야 할 셀 문서를 선택합니다. 2. 데이터에서 "열"을 클릭하여 엽니다. 3. 팝업창에서 "고정 너비"를 선택하고 "다음"을 클릭하세요. 4. 팝업창에서 열을 분리하려는 위치를 클릭한 후 Enter 키를 눌러 확인하세요. 하나의 예에서 추론을 그려보세요. 3으로 변경해야 하는 경우 숫자를 3으로 변경할 수도 있습니다. 5. 그런 다음 마침을 클릭합니다. 6. 다른 방법도 있어요

Word에서 테이블을 가로 및 세로로 전환하는 방법 Word에서 테이블을 가로 및 세로로 전환하는 방법 Mar 20, 2024 am 09:31 AM

Word 소프트웨어는 우리에게 없어서는 안될 소프트웨어이며 자주 사용해야 합니다. 이전에 Word 소프트웨어를 사용하여 표를 편집하는 방법을 배웠습니다. 그러나 실수로 표를 가로 및 세로 방향으로 편집하면 다시 시간을 낭비하고 싶지 않습니다. -만들고 보니 테이블의 가로, 세로 방향을 바꿀 수 있나요? 대답은 당연히 그렇습니다.다음으로 편집자가 Word에서 테이블을 가로 및 세로로 바꾸는 방법을 자세히 소개하겠습니다. 먼저 아래 Word 표의 행과 열을 바꿔야 합니다. 이렇게 하려면 먼저 테이블 전체를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 복사 기능을 선택해야 합니다. 2단계: 복사를 선택한 후 단어를 최소화한 다음 Excel 테이블을 열고 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택한 다음 Exc에 붙여넣습니다.

초보자를 위한 양식 작성 요령은 무엇입니까? 초보자를 위한 양식 작성 요령은 무엇입니까? Mar 21, 2024 am 09:11 AM

우리는 엑셀로 표를 생성하고 편집하는 일이 많은데 이제 막 소프트웨어를 접한 초보자로서 엑셀을 이용해 표를 만드는 방법은 생각보다 쉽지 않습니다. 아래에서는 초보자, 즉 초보자가 마스터해야 할 테이블 생성의 몇 가지 단계에 대해 몇 가지 훈련을 수행합니다. 초보자를 위한 샘플 양식은 다음과 같습니다. 작성 방법을 살펴보겠습니다! 1. 새로운 엑셀 문서를 만드는 방법은 두 가지가 있습니다. [바탕화면] - [새로 만들기] - [xls] 파일의 빈 곳을 마우스 오른쪽 버튼으로 클릭하시면 됩니다. [시작]-[모든 프로그램]-[Microsoft Office]-[Microsoft Excel 20**]을 사용할 수도 있습니다. 2. 새 ex를 두 번 클릭합니다.

See all articles