자바 스크립트를 사용하여 테이블에서 셀의 배경색을 변경하는 방법

자바 스크립트를 사용하여 테이블에서 단일 셀의 배경색을 변경해야합니다.자바 스크립트를 사용하여 테이블에서 셀의 배경색을 변경하는 방법

문서 중에 나는 모든 셀의 스타일이 동일해야하므로 (이렇게 추가 한 스타일 시트를 사용해야합니다.),하지만 버튼을 클릭하면 첫 번째 셀의 색상을 변경해야합니다. 다음

는

샘플 코드

<html lang="en"> 
    <head>  
    <script type="text/javascript" >   

    function btnClick() 
    { 
      var x = document.getElementById("mytable").cells; 
      x[0].innerHTML = "i want to change my cell color"; 
      x[0].bgColor = "Yellow";    
    } 
    </script> 
</head> 
    <style> 
    div 
    { 
    text-align: left; 
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px; 
    } 
    td.td 
    { 
       border-width : 1px; 
       background-color: #99cc00; 
       text-align:center; 

    } 
    </style> 
    <body> 
    <div> 
    <table id = "mytable" width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #ffffff;"> 
     <tr valign="top"> 
     <td class = "td"><br /> </td> 
     <td class = "td"><br /> </td> 
     </tr> 
     <tr valign="top"> 
     <td class = "td"><br /> </td> 
     <td class = "td"><br /> </td> 
     </tr> 
    </table> 
    </div> 
     <input type="button" value="Click" OnClick = "btnClick()"> 
    </body> 
</html>

출처

2012-07-17 Kasma

에게 인이 시도 : JS에서

function btnClick() { 
    var x = document.getElementById("mytable").getElementsByTagName("td"); 
    x[0].innerHTML = "i want to change my cell color"; 
    x[0].style.backgroundColor = "yellow";    
}

설정, backgroundColor 당신의 스타일 시트에 background-color하는 것과 동일합니다.

.cells 컬렉션은 테이블 행에 속하며 테이블 자체에 속하지 않습니다. 모든 행에서 모든 셀을 가져 오려면 getElementsByTagName()을 대신 사용할 수 있습니다.

데모 : 다음 http://jsbin.com/ekituv/edit#preview

출처

2012-07-17 06:37:21 nnnnnn

<table border="1" cellspacing="0" cellpadding= "20"> 
    <tr> 
    <td id="id1" ></td> 
    </tr> 
</table> 
<script> 
    document.getElementById('id1').style.backgroundColor='#003F87'; 
</script>

넣어 세포에 대한 ID와 셀의 배경을 변경합니다.

출처

2014-01-10 10:10:45 Thilini

document.getElementById('id1').bgColor = '#00FF00';

나는 .style.backgroundColor이 그렇게 생각하지 않는다.

출처

2016-03-21 01:07:52 user3029797

자바 스크립트를 사용하여 테이블에서 셀의 배경색을 변경하는 방법

답변

관련 문제