2010-03-28 5 views
2

JQuery를 사용하여 테이블을 빌드하는 데 일부 코드를 사용하고 있지만 Mac OSX의 Firefox 3.5.3에서는 테이블 셀이 모두 별도의 줄에 표시되는 대신 각각의 행에 OSX에서 Chrome 5.0.342.7 베타는 Safari 4.0.5와 마찬가지로 테이블을 올바르게 생성합니다. 나는이 올바른 출력을 얻을 크롬과 사파리에서Mac OSX에서 Firefox의 JQuery를 사용하는 자바 스크립트 테이블 생성 버그

<html> 
<body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    var b = $('body'); 
    b.append("<table>"); 
    for (var i = 0; i < 3; ++i) 
    { 
     b.append("<tr>"); 
     for (var j = 0; j < 3; ++j) 
      b.append("<td>x</td>"); 
     b.append("</tr>"); 
    } 
    b.append("</table>"); 
}); 
</script> 
</body> 
</html> 

:

x x x 
x x x 
x x x 

을하지만, 파이어 폭스 생산 : 여기

는 최소한의 재생 경우가

x 
x 
x 
x 
x 
x 
x 
x 
x 

참고 경우 그 나는 자바 스크립트를 사용하지 않고 정확한 테이블을 수동으로 생성한다 (즉, HTML에 직접 연결). 그러면 테이블이 나타난다. Firefox에서 올바르게 작동합니다. 또한 JS를 append으로 변경하면 전체 테이블을 한 번 호출 한 다음 작동합니다. 작동하지 않는 유일한 시간은 내가 전에 한 것처럼 파트를 파트별로 추가하는 경우입니다.

내 질문에 :이게 예상 되나요? 아니면 이것을 Firefox에 버그로보고해야합니까? 나는 이것이 파이어 폭스 버그라고 확신한다. 그러나 나는 JS와 웹 개발에 대한 약간의 초보자 다. 그래서 내가 놓친 게 있을까?

P. 분명히이 문제를 해결할 수있는 쉬운 방법이 있습니다. 그건 내 관심사가 아닙니다. 위 참조. 그들은 테이블 내부 있어야하고 -

답변

1

당신은 jQuery를 당신이이 일을하려고에 대한 처리 할 것을 훨씬을 어떻게하려고 :

var table = $("<table>"); 
for (var i = 0; i < 3; ++i) { 
    var tr = $("<tr>").appendTo(table); 
    for (var j = 0; j < 3; ++j) 
     $("<td>x</td>").appendTo(tr); 
} 
table.appendTo('body'); 

jQuery를 당신을위한 DOM 조각을 만들어 처리하고 당신을 위해 요소를 생성합니다.

+0

오른쪽! OP가 잘못된 결론을 내린 것처럼 보이는 것처럼, "추가"기능은 HTML 소스 코드 조각을 무언가에 추가하는 것과 관련이 없습니다. – Pointy

1

나는 그것이 <tr> 요소를 추가하는 의미가 있다고 생각하지 않습니다. <table> 요소를 추가하면 완료 테이블 요소가 추가됩니다. 그런 다음 임의의 테이블 행 이후에 추가하면 실제로 의미가 없습니다.

대신이 작업을 수행 :

var b = $('body'), t = $('<table/>'); 
for (var i = 0; i < 3; ++i) { 
    var tr = $('<tr/>'); 
    for (var j = 0; j < 3; ++j) tr.append($('<td/>').text("x")); 
    t.append(tr); 
} 
b.append(t); 

그런 식으로, 당신은, 각 행의 테이블 셀 요소를 추가 테이블에 각 행을 추가하고, 마지막으로 몸에 테이블을 추가하고 있습니다.

+0

그건 완전히 요점입니다. –

+0

아니요, ** 점이 아닙니다 **입니다 **. 실제로 "append()"함수가 어떻게 작동하는지 알고 있습니까? 당신은 여기에 도움을 청하고 있으며, 나는 당신에게 도움을주고 싶습니다. 그렇게 무례하지 마십시오. – Pointy

+0

Firefox에서는 작동하지 않습니다. –