2015-06-24 1 views
2

У меня есть такой код:как изменить элемент внутри таблицы с помощью Java Script

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="myFunction()">Click me</button> 

<table class="demo"> 
    <div> 
     <a>link1</a> 
     <p>text</p> 
    </div> 
</table> 

<a>link2</a> 

<script> 
function myFunction() { 
    var el = document.getElementsByClassName("demo")[0].getElementsByTagName("a"); 
    for (var i = 0; i < el.length; i++) { 
     el[i].style.color = "red"; 
} 
} 
</script> 

</body> 
</html> 

Я хотел бы изменить только эти ссылки, которые находятся внутри table. Можно ли использовать js? Как это сделать?

+0

Предлагайте использовать 'document.querySelectorAll ('table.demo a');' чтобы получить все ваши ссылки. – Cyrbil

ответ

1

Ваш html недействителен, div не может быть ребенком table.

Поскольку вы не используете таблицы конструкции изменить table к div

function myFunction() { 
 
    var el = document.getElementsByClassName("demo")[0].getElementsByTagName("a"); 
 
    for (var i = 0; i < el.length; i++) { 
 
    el[i].style.color = "red"; 
 
    } 
 

 
}
<button onclick="myFunction()">Click me</button> 
 
<div class="demo"> 
 
    <div> 
 
    <a>link1</a> 
 
    <p>text</p> 
 
    </div> 
 
</div> 
 
<a>link2</a>

HTML, вынесенное при использовании разметки, как показано на рисунке ниже, если смотреть на него в div предоставляется за пределами table

enter image description here

+0

http://jsfiddle.net/arunpjohny/pj0b1mw2/ –

0

Фактически, div может находиться внутри тега td.

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="myFunction()">Click me</button> 

<table class="demo"> 
<tr> 
<td> 
<div> 
<a>link1</a> 
<p>text</b> 
</div> 
</td> 
</tr> 
</table> 
<a>link2</a> 

<script> 
function myFunction() { 
    var el = document.getElementsByClassName("demo")[0].getElementsByTagName("a"); 
    for (var i = 0; i < el.length; i++) { 
     el[i].style.color = "red"; 
} 

} 
</script> 

</body> 
</html> 

Он работает тогда. Подобная конструкция использует IBM Websphere Portal.

0

Вы должны использовать тег span.

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="myFunction()">Click me</button> 

<table class="demo"> 
<tr> 
<td> 
<div> 
<a><span id="link1">link1</span></a> 
<p>text</b> 
</div> 
</td> 
</tr> 
</table> 
<a>link2</a> 

<script> 
function myFunction() { 
    document.getElementById("link1").innerHTML="abcd"; 

} 
</script> 

</body> 
</html> 

Нажмите кнопку, чтобы изменить ссылку, используя js. Вы можете выполнять любые изменения css с использованием id span. Подскажите, пожалуйста, если это разрешит ваш запрос.

Смежные вопросы