중첩 된 HTML 테이블에 열을 추가하는 방법

DIV를 선호하지만 중첩 테이블을 사용하는 프로젝트에서 작업하고 있습니다. 이미 존재하는 일부 필드를 이동하고 새로운 필드를 작성하여 그리드 (.NET의 gridview 생각)로 설명 할 필요가 있습니다.중첩 된 HTML 테이블에 열을 추가하는 방법

중첩 된 HTML 표에 열을 추가하는 가장 쉬운 방법은 무엇입니까? 또는 gridview에서 필요한 필드를 제외하고 전체 페이지를 테이블이없는 디자인으로 다시 디자인한다는 아이디어를 조사해야합니까? 당신은 각 행에 < TD에게 > 셀을 추가해야 할 것, 기타

출처

2010-07-12 SidC

클라이언트 측에서 수행 할 수있는 작업인가, 아니면 서버 측에서만 구현할 계획입니까? jQuery는 클라이언트 측에서 이런 종류의 일을 돕는다. – Tim

@Tim, 나는 가장 매끄러운 해결책이 무엇이든 열어두고 있습니다. JQuery를 사용하는 관점에서 무엇을 제안합니까?고마워;) – SidC

데이터가 현재 쿼리되고 서버 측의 테이블에 저장되는 경우이 방법을 사용하는 것이 좋습니다. 그 시점 이후의 Ajax 상호 작용은 공정한 게임이지만 이전에 jQuery와 관련된 이점을 보지 못했습니다. – Fosco

재료, 노동 :

열 : 수량, AMT 사의가,
행 노트

GRIDVIEW이 같은 것입니다.

당신도 주위를 움직여야한다고 했으므로 출력 구조를 DIV 형식이나 다시 쓴 테이블 구조로 다시 작성하는 것을 고려해야합니다. 필자는 개인적으로 데이터 그리드 용 테이블 구조를 선호합니다. 내가 제대로 질문을 이해하면

출처

2010-07-12 16:54:52 Fosco

제안 해 주셔서 감사합니다. 어젯밤에 중첩 된 테이블을 추가하려고 시도했는데 그 결과가 매우 지저분하다고 말해야합니다. 실제 그리드에 대해서만 테이블을 사용하여 DIV 형식으로 다시 작성하는 접근 방식을 취할 것입니다. 도움과 안내에 다시 한 번 감사드립니다! – SidC

우선 해제, 내가 그것을 다음 컬럼으로 해당 테이블을 사용하여 내부 당신이 <table>와 <td>를 추가하는 시도 할 수 ... 을 ... GRIDVIEW 어떻게 생겼는지 모르겠지만 . 당신이 행을 완료하면 </table></td>에 추가하고 모든 것들은 이전과 같아야합니다.

이 방법은 실제로 지저분해질 수 있으며 100 % 확신하지 못하고 있습니다.

출처

2010-07-12 17:00:43

jQuery에는 다양한 DOM 통과 기능이 있습니다.

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#aTable > tbody").append('<tr id="row1"><td>some data</td></tr>'); 
    }); 
</script> 
</head> 
<body> 
    <table id="aTable"></table> 
</body> 
</html>

이 테이블에 단일 셀을 추가합니다 :

는 예를 들어, 당신은 다음 테이블에 추가 할 jQuery를 사용할 수

<html> 
<body> 
    <table id="aTable"></table> 
</body> 
</html>

시작 말할 수 있습니다. tbody 태그에 주목하자. 브라우저에서 렌더링 할 때 tbody가 함축적 인 태그이므로 이것이 필요하다는 것을 알았다.

이제 뒤로가 보겠습니다. 당신이 테이블에 이미 셀로 시작하는 경우에는 제거() 함수를 사용하여 매우 쉽게 제거 할 수 있습니다

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" /> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#row1").remove(); 
    }); 
</script> 
</head> 
<body> 
    <table id="aTable"> 
     <tr id="row1"> 
     <td>some data</td> 
     </tr> 
    </table> 
</body> 
</html>

그리고 게이, 그것은 사라 졌어요. 이런 식으로하는 것이 좋은 점은 이벤트 핸들러와 모든 멋진 것들을 대화 형 방식으로 사용할 수 있다는 것입니다. 저도 jQuery의 표면을 긁을 수있는 방법은 없어요. 제가 너무 익숙하기 때문에 그렇습니다.하지만 문서는 꽤 좋습니다. Check it out

편집 : 이것은 또한 내가 추가 할 내용을 알고 있다고 가정합니다. 즉각적으로 수행해야하는 경우, 약간의 AJAX가 먼 길을 간다. (jQuery는 이것을 잘 만들어 준다.)

출처

2010-07-12 20:35:31 Tim

감사합니다. 나는 이것을 위해 JQuery를 고려하지 않았다. – SidC

중첩 된 HTML 테이블에 열을 추가하는 방법

답변

관련 문제