как поменять картинку при щелчке в таблице
Здравствуйте! вот скрипт который при щелчке меняет картинку.
<script>
function chg(id)
{
var el = document.getElementById(id);
if (el.src.indexOf("image/x.png")>0)
{
el.src="image/xb.png";
}
else
{
el.src="image/x.png";
}
}
</script>
<img src="image/x.png" id="img_1" onClick="chg(this.id,'check')">
а в таблице не хочит <td align="center" background="image/x.png" id="img_1" onClick="chg(this.id,'check')">1</td> как сделать чтобы в баблице менял? |
leon2009sp,
у ячейки нет src |
так я уже и подставлял background в место него
|
leon2009sp,
атрибуты |
leon2009sp,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.old{
cursor: pointer;
text-align: center;
background-image: url(http://javascript.ru/forum/images/smilies/smile.gif);
}
.new.old{
background-image: url(http://javascript.ru/forum/images/smilies/dance3.gif);
}
</style>
</head>
<body>
<table width="400" summary="" >
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old">1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td class="old">Cell 2.3</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('.old'), function(item) {
item.addEventListener('click', function() {
item.classList.toggle('new')
});
});
});
</script>
</body>
</html>
|
спасибо! это сложновато для меня, попробую разобрать
|
leon2009sp,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td[background]{
cursor: pointer;
text-align: center;
}
</style>
</head>
<body>
<table width="400" summary="" >
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
</thead>
<tbody>
<tr>
<td background="http://javascript.ru/forum/images/smilies/smile.gif">1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td background="http://javascript.ru/forum/images/smilies/smile.gif">Cell 2.3</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('td[background]'), function(item) {
item.addEventListener('click', function() {
var background = item.getAttribute('background') == 'http://javascript.ru/forum/images/smilies/smile.gif' ?
'http://javascript.ru/forum/images/smilies/dance3.gif' : 'http://javascript.ru/forum/images/smilies/smile.gif'
item.setAttribute('background', background)
});
});
});
</script>
</body>
</html>
|
leon2009sp,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<table width="400" summary="" >
<tbody>
<tr>
<td align="center" background="http://javascript.ru/forum/images/smilies/smile.gif" id="img_1" onClick="chg(this.id)">1</td>
</tr>
</tbody>
</table>
<script>
function chg(id) {
var el = document.getElementById(id);
if (el.background.indexOf("http://javascript.ru/forum/images/smilies/smile.gif") === -1) {
el.background = "http://javascript.ru/forum/images/smilies/smile.gif";
} else {
el.background = "http://javascript.ru/forum/images/smilies/dance3.gif";
}
}
</script>
</body>
</html>
|
нажатие на кнопки
Рони, правда не хотел беспокоить, думал что с горем, но справлюсь.
я выбрал вот этот вариант
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.old{
cursor: pointer;
text-align: center;
background-image: url(x.png);
}
.new.old{
background-image: url(xb.png);
}
</style>
</head>
<body>
<table width="400" summary="">
<tbody>
<tr>
<td class="old" id="1" value="1">1</td>
<td class="old" id="2" value="2">2</td>
<td class="old" id="3" value="3">3</td>
</tr>
<tr>
<td class="old" id="4" value="4">4</td>
<td class="old" id="5" value="5">5</td>
<td class="old" id="6" value="6">6</td>
</tr>
<tr>
<td id="4">----------</td>
<td id="5">------------</td>
<td id="6">---------</td>
</tr>
</tbody>
</table>
<script>
window.addEventListener('DOMContentLoaded', function()
{
[].forEach.call(document.querySelectorAll('.old'), function(item)
{
item.addEventListener('click', function()
{
item.classList.toggle('new')
});
});
});
</script>
</body>
</html>
вот http://sincorrer.xyz/game.php здесь он.но сюдаже можно дописать чтобы показывала сколько номеров выбрано и какие? |
leon2009sp,
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.old{
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
text-align: center;
background-image: url(http://sincorrer.xyz/image/xb.png);
}
.new.old{
background-image: url(http://sincorrer.xyz/image/x.png);
}
</style>
</head>
<body>
<table width="200" summary="">
<tbody>
<tr>
<td class="old" id="1" value="1">1</td>
<td class="old" id="2" value="2">2</td>
<td class="old" id="3" value="3">3</td>
</tr>
<tr>
<td class="old" id="4" value="4">4</td>
<td class="old" id="5" value="5">5</td>
<td class="old" id="6" value="6">6</td>
</tr>
<tr>
<td id="4">----------</td>
<td id="5">------------</td>
<td id="6">---------</td>
</tr>
</tbody>
</table>
<div class="show">Выбор за Вами!</div>
<script>
window.addEventListener('DOMContentLoaded', function()
{
[].forEach.call(document.querySelectorAll('.old'), function(item)
{
item.addEventListener('click', function()
{ if(document.querySelectorAll('.new').length > 2 && !item.classList.contains('new')) {alert('больше 3 нельзя, уберите одно из 3 для нового выбора');return} ;
item.classList.toggle('new');
var res = [].map.call(document.querySelectorAll('.new'),
function(el) {
return el.id
})
document.querySelector('.show').innerHTML = res.length ? 'Выбрано: '+ res.length +' номера/ов ' + res : 'Выбор за Вами!'
});
});
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:10. |