getElementsByClassName không hoạt động

Tôi đã mã hóa trang php hiển thị thông tin từ cơ sở dữ liệu mysql gọn gàng vào bảng. Tôi muốn ẩn các hàng bảng trống với một trình xử lý sự kiện onLoad.getElementsByClassName không hoạt động

Đây là bảng mẫu có mã giấu <td> khi không có nội dung. nhưng tôi chỉ có thể lấy nó để làm việc với các ID khác nhau:

 <script type="text/javascript"> 
     function hideTd(id){ 
      if(document.getElementById(id).textContent == ''){ 
       document.getElementById(id).style.display = 'none'; 
      } 
      } 
     </script> 
     </head> 
     <body onload="hideTd('1');hideTd('2');hideTd('3');"> 
     <table border="1"> 
      <tr> 
      <td id="1">not empty</td> 
      </tr> 
      <tr> 
      <td id="2"></td> 
      </tr> 
      <tr> 
      <td id="3"></td> 
      </tr> 
     </table> 
    </body>

những gì tôi muốn làm là sử dụng một lớp cho <td> s để đạt được điều tương tự trong khi chỉ có tham chiếu đến lớp một lần, và không tham khảo mỗi id đơn mà tôi muốn xóa, điều này thậm chí sẽ không hoạt động đối với nội dung động của tôi. Tôi đã thử sử dụng mã này:

<script type="text/javascript"> 
    function hideTd(){ 
     if(document.getElementsByClassName().textContent == ''){ 
      document.getElementsByClassName().style.display = 'none'; 
     } 
     } 
    </script> 
    </head> 
    <body onload="hideTd('1');"> 
    <table border="1"> 
     <tr> 
     <td class="1">not empty</td> 
     </tr> 
     <tr> 
     <td class="1"></td> 
     </tr> 
     <tr> 
     <td class="1"></td> 
     </tr> 
    </table> 
</body>

nhưng không hoạt động. nó có nghĩa vụ che giấu các <td> có sản phẩm nào có lớp được chỉ định. làm cách nào để ẩn các lớp học không sử dụng <td> s, không phải ID?

Nguồn

2010-07-28 new star

tôi đã đăng một câu trả lời với một hàm hoạt động như một dự phòng nếu getElementsByClassName không tồn tại –

Có một số vấn đề:

tên lớp (và ID) là not allowed to start with a digit.
Bạn phải chuyển một lớp học đến getElementsByClassName().
Bạn phải lặp lại tập hợp kết quả.

Ví dụ (chưa được kiểm tra ):

<script type="text/javascript"> 
function hideTd(className){ 
    var elements = document.getElementsByClassName(className); 
    for(var i = 0, length = elements.length; i < length; i++) { 
     if(elements[i].textContent == ''){ 
      elements[i].style.display = 'none'; 
     } 
    } 

    } 
</script> 
</head> 
<body onload="hideTd('td');"> 
<table border="1"> 
    <tr> 
    <td class="td">not empty</td> 
    </tr> 
    <tr> 
    <td class="td"></td> 
    </tr> 
    <tr> 
    <td class="td"></td> 
    </tr> 
</table> 
</body>

Lưu ý rằng getElementsByClassName()is not available up to and including IE8.

Cập nhật:

Hoặc bạn có thể cung cấp cho bàn một ID và sử dụng:

var elements = document.getElementById('tableID').getElementsByTagName('td');

để có được tất cả các yếu tố td.

Để ẩn hàng phụ huynh, sử dụng parentNode tài sản của nguyên tố này:

elements[i].parentNode.style.display = "none";

Nguồn

2010-07-28 01:52:08

nó hoạt động ngay bây giờ! nhưng nếu getElementsByClassName() không có sẵn trong IE, có cách nào khác để ẩn một td rỗng mà không tham chiếu đến từng cái không? Ngoài ra, có cách nào để che giấu toàn bộ tr nếu td rỗng không? Cảm ơn –

@ảnh mới: Vui lòng xem câu trả lời cập nhật của tôi. –

cảm ơn bạn đã thay thế! –

Nếu bạn muốn làm điều đó bằng cách ClassName bạn có thể làm:

<script type="text/javascript"> 
function hideTd(className){ 
    var elements; 

    if (document.getElementsByClassName) 
    { 
     elements = document.getElementsByClassName(className); 
    } 
    else 
    { 
     var elArray = []; 
     var tmp = document.getElementsByTagName(elements); 
     var regex = new RegExp("(^|\\s)" + className+ "(\\s|$)"); 
     for (var i = 0; i < tmp.length; i++) { 

      if (regex.test(tmp[i].className)) { 
       elArray.push(tmp[i]); 
      } 
     } 

     elements = elArray; 
    } 

    for(var i = 0, i < elements.length; i++) { 
     if(elements[i].textContent == ''){ 
      elements[i].style.display = 'none'; 
     } 
    } 

    } 
</script>

Nguồn

2010-07-28 11:19:01

getElementsByClassName không hoạt động

Trả lời

Các vấn đề liên quan