tr마다 동일 데이터 값이 있을 경우 아래, 위 셀병합. 

<tr class="link dataRow" >
	<td class="t1">홍길동</td>
	<td class="t2">테스트</td>
	<td class="t3">테스트2</td>
	<td class="t4">테스트3</td>
	<td class="t5_abcd_01">5</td>
	<td class="t6_abcd_02">3</td>
</tr>
$(document).ready(function(){
	genRowspan("t1");
	genRowspan("t2");
	genRowspanT5T6("t3_");
	genRowspanT5T6("t4_");
	genRowspanT5T6("t5_");
	genRowspanT5T6("t6_");
});

function genRowspan(className){
	$("."+className).each(function(){
		var rows = $("."+className+":contains('"+$(this).text()+"')");
		if(rows.length > 1){
			rows.eq(0).attr("rowspan", rows.length);//중복되는 첫번째 td에 rowspan값 세팅
			rows.not(":eq(0)").remove();//중복되는 td를 삭제
		}
	});
}

function genRowspanT5T6(preClassName){
	var rows = $("td[class^="+preClassName+"]");
	
	rows.each(function(index, item){
		var csName = $(item).attr("class");
		var dupRows = $("."+csName);
		
		if(dupRows.length > 1){
			dupRows.eq(0).attr("rowspan", dupRows.length); //중복되는 첫번째 td에 rowspan값 세팅
			dupRows.not(":eq(0)").remove(); //중복되는 td를 삭제
		}
	})
}

https://zero-gravity.tistory.com/311여기를 참조함.

 

[jQuery] 유동적인 테이블 셀병합 - rowspan

위와 같이 소속에 같은 데이터가 있을 경우 하나의 셀로 병합해주는 코드다. $(document).ready(function(e){ genRowspan("td 클래스명"); }); function genRowspan(className){ $("." + className).each(functio..

zero-gravity.tistory.com

'자바스크립트 > Javascript 참고자료' 카테고리의 다른 글

[javascript] 화살표함수와 ()=> this  (0) 2019.12.16
정규표현식 정리  (0) 2019.11.21
[ES6] for ~ of의 활용  (0) 2018.12.27
[ES6] ES6 , let과 const  (0) 2018.12.27
[ES6] spread operator와 from 메소드  (0) 2018.12.27

ES6에서 배열과 관련해서 유용한 오퍼레이터와 메소드가 있습니다.

아래 코드로 확인하시죠.



//spread operator 배열 복사
let data1 = ["aa","bb", 123];
let data2 = [...data1];
console.log(data1,data2);
console.log(data1 === data2); //false. 데이터를 복사한것뿐.

//활용
function sum(a,b,c){
  return a+b+c;
}

let pre = [100,200,300];
console.log(sum(...pre));

//ES2015 from method
function addMark(){
  let newArray = Array.from(arguments); //arguments는 내부 객체. 가변 인자를 받음.
  let newData = newArray.map(function(value){
    return value + "!";
  });
  
  console.log(newData);
}

addMark(1,2,3,4,5,6,7);


인프런 "모던 자바스크립트(javascript) 개발을 위한 ES6 강좌"를 정리한 내용입니다.

가끔씩 특정 사이트의 소스보기를 해보면 아래와 같이 .js나 .css 파일을 선언할 때 파라미터를 붙이는 경우를 종종 보곤 합니다.


<script src="/static/js/common/common.js?v=1"></script>
<script src="/static/js/common/portal.js?v=20181210"></script>
<link href="/static/css/content.css?1" rel="stylesheet" type="text/css" media="all">


이렇게 하는 이유는 브라우저의 캐싱을 막기 위해서입니다. 실제로 파라미터는 특별한 기능을 하는 것은 아니지만 관리 및 개발 측면에서 장점이 있습니다.


우리가 개발할 때, 스크립트나 스타일을 변경하고 새로고침을 해도 적용이 안되는 현상을 겪어보셨을 겁니다. 크롬으로 테스트했다면 익스플로러나 파이어폭스를 띄우면 해당 내용이 잘 적용되어 있죠. 캐쉬문제입니다. 캐쉬를 삭제하고 리로드 해야만 크롬에서도 변경된 내용이 적용되어 있는 것을 확인할 수 있는데, 파라미터를 사용하면 서버로부터 재요청된 정보를 불러오기 때문에 이러한 불편함을 해결할 수 있습니다.

또한, 버전이나 날짜를 표시해준다면 관리 측면에서도 도움이 되겠죠.


이 점을 유념하면서 개발을 하면 좋을 것 같습니다.


  

자바스크립트로 알고리즘 짜는 연습을 하다보니 array를 많이 사용했었는데, 가만있어보자,, 아하!! JSON이 있었자너!!



var json = {NAME: "tomy", AGE: 35, SEX: "male"};

//add item (key, value)
json.BIRTHDAY = '1988-03-01';

//delete item (key)
delete json.SEX;

console.clear();
console.log(json);

json을 이용하면 알고리즘 코딩이 조금 더 수월해 질 수 있습니다.

'자바스크립트 > Javascript 참고자료' 카테고리의 다른 글

정규표현식 정리  (0) 2019.11.21
jQuery 테이블 셀병합 (rowspan)  (0) 2019.11.19
[ES6] for ~ of의 활용  (0) 2018.12.27
[ES6] ES6 , let과 const  (0) 2018.12.27
[ES6] spread operator와 from 메소드  (0) 2018.12.27

+ Recent posts