我有一张桌子。
我认为CSS覆盖了JavaScript,因为控制台告诉我我有正确的元素来更改显示属性。这是我正在使用的HTML,CSS和JavaScript:
function hideComment(){
this.parentNode.style.display="none";
this.parent.firstChild.style.display="block";
}
var exitButton = document.querySelectorAll(".exit-button");
for (var i = 0; i < exitButton.length; i++){
exitButton[i].addEventListener ('click', hideComment, false);
}
function addComment(){
this.style.display = 'none';
this.nextSibling.style.display = "block";
}
var displayComment = document.querySelectorAll(".fa-comment-o");
for (var i = 0; i < displayComment.length; i++){
displayComment[i].addEventListener('click', addComment, false);
}
.c-na-table textarea,
.c-na-table button{
display: none;
}
<p>This table enables users to leave a comment in one of the cells.</p>
<div class="table-three">
<table class="c-na-table">
<thead class="th-head">
<tr>
<td class="td-input"></td>
<td class="column-a-0c no-lite">Course 1</td>
<td class="column-b-0c no-lite">Course 2</td>
<td class="column-c-0c no-lite">Course 3</td>
<td class-"column-d">Comments </td>
</tr>
</thead>
<tbody>
<tr class="row-a">
<td class="td-input"><input type="checkbox"></input></td>
<td class="column-a-3">Specification 1</td>
<td class="column-b-3">Specification 1</td>
<td class="column-c-3">Specification 1</td>
<td class="column-d"><i class="fa fa-comment-o" aria-hidden="true"></i><div id="ta-one">
<button class="exit-button">×</button>
<textarea row="4" col="20"></textarea>
</div></td>
</tr>
<tr class="row-b">
<td class="td-input"><input type="checkbox"></input></td>
<td class="column-a-3">Specification 2</td>
<td class="column-b-3">Specification 2</td>
<td class="column-c-3">Specification 2</td>
<td class="column-d"><i class="fa fa-comment-o" aria-hidden="true"></i><div id="ta-two">
<button class="exit-button">×</button>
<textarea row="4" col="20"></textarea>
</div></td>
</tr>
<tr class="row-c">
<td class="td-input"><input type="checkbox"></input></td>
<td class="column-a-3">Specification 3</td>
<td class="column-b-3">Specification 3</td>
<td class="column-c-3">Specification 3</td>
<td class="column-d"><i class="fa fa-comment-o" aria-hidden="true"></i><div id="ta-three">
<button class="exit-button">×</button>
<textarea row="4"col="20"></textarea>
</div></td>
</tr>
</tbody>
<tfoot class="tf-foot">
<tr></tr>
</tfoot>
</table>
</div>
答案 0 :(得分:0)
出于某种原因,CSS覆盖了JavaScript。想知道原因。
解决。
var textAreaDiv1 = document.getElementById('ta-one').style.display='none';
var textAreaDiv1 = document.getElementById('ta-two').style.display='none';
var textAreaDiv1 = document.getElementById('ta-three').style.display='none';
function hideComment(){
this.parentNode.style.display="none";
this.parentNode.parentNode.firstChild.style.display="block";
}
var exitButton = document.querySelectorAll(".exit-button");
for (var i = 0; i < exitButton.length; i++){
exitButton[i].addEventListener ('click', hideComment, false);
}
function addComment(){
this.style.display = 'none';
this.nextSibling.style.display = "block";
}
var displayComment = document.querySelectorAll(".fa-comment-o");
for (var i = 0; i < displayComment.length; i++){
displayComment[i].addEventListener('click', addComment, false);
}