선택한 행, 첫 번째 및 마지막 셀 테두리를 변경하십시오.

Question

기본 테이블이 있고 선택한 행에 첫 번째 셀의 왼쪽과 마지막 셀의 오른쪽에 테두리가 있어야합니다. 이것은 행이 현재 선택되어 있음을 사용자에게 알려주는 지표입니다.

셀의 배경색을 변경할 수 있습니다. 따라서 자바 스크립트로 의도 한대로 할 수 있습니다. 국경 효과가 일어나기 위해 바꿀 속성이 필요합니다.

감사합니다.

function addRowHandlers() { 
 
    var table = document.getElementById("example"); 
 
    
 
    
 
    var rows = table.getElementsByTagName("tr"); 
 
    for (i = 0; i < rows.length; i++) { 
 
     var currentRow = table.rows[i]; 
 
     var createClickHandler = 
 
      function(row) 
 
      { 
 
       return function() { 
 
             var cell = row.getElementsByTagName("td")[0]; 
 
             
 
             row.getElementsByTagName("td")[0].style.backgroundColor = "white"; 
 
             row.getElementsByTagName("td")[0].style.border = "black solid 2px;"; 
 
             
 
             var id = cell.innerHTML; 
 
             alert("id:" + id); 
 
           }; 
 
      }; 
 

 
     currentRow.onclick = createClickHandler(currentRow); 
 
    } 
 
} 
 
window.onload = addRowHandlers();

<div> 
 
<table id="example"> 
 
  <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
  </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
</div>

Answer 1

당신이 자바 스크립트 borderLeft 및 borderRight를 사용해야합니다 :

난 당신이 좀보고에 대한 모형을 만들었습니다.

아래 내 스 니펫을 참조하십시오. 이

function addRowHandlers() { 
 
    var table = document.getElementById("example"); 
 
    
 
    
 
    var rows = table.getElementsByTagName("tr"); 
 
    for (i = 0; i < rows.length; i++) { 
 
     var currentRow = table.rows[i]; 
 
     var createClickHandler = 
 
      function(row) 
 
      { 
 
       return function() { 
 
             var cell = row.getElementsByTagName("td")[0]; 
 
             
 
             row.getElementsByTagName("td")[0].style.backgroundColor = "white"; 
 
             row.firstElementChild.style.borderLeft = "black solid 2px"; 
 
             row.lastElementChild.style.borderRight = "black solid 2px"; 
 
             var id = cell.innerHTML; 
 
             alert("id:" + id); 
 
           }; 
 
      }; 
 

 
     currentRow.onclick = createClickHandler(currentRow); 
 
    } 
 
} 
 
window.onload = addRowHandlers();

tr td:first-child { border-left:2px solid transparent;} 
 
tr td:last-child { border-right:2px solid transparent;}

<div> 
 
<table id="example"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
</div>

당신이 자바 스크립트`borderLeft`와`borderRight`를 사용할 필요가