Javascript-форум - как поменять картинку при щелчке в таблице

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - как поменять картинку при щелчке в таблице (https://javascript.ru/forum/css-html/60326-kak-pomenyat-kartinku-pri-shhelchke-v-tablice.html)

leon2009sp

22.12.2015 19:01

как поменять картинку при щелчке в таблице

Здравствуйте! вот скрипт который при щелчке меняет картинку.

<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>

как сделать чтобы в баблице менял?

рони	22.12.2015 20:00

leon2009sp,
у ячейки нет src

leon2009sp

22.12.2015 20:09

так я уже и подставлял background в место него

рони	22.12.2015 20:16

leon2009sp,
атрибуты

рони	22.12.2015 20:20

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

22.12.2015 20:27

спасибо! это сложновато для меня, попробую разобрать

рони	22.12.2015 20:34

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>

рони	22.12.2015 20:40

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>

leon2009sp

05.01.2016 13:11

нажатие на кнопки

Рони, правда не хотел беспокоить, думал что с горем, но справлюсь.
я выбрал вот этот вариант

<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 здесь он.
но сюдаже можно дописать чтобы показывала сколько номеров выбрано и какие?

рони	05.01.2016 14:22

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>

leon2009sp

05.01.2016 23:00

разделение вывода

ответы разделил и поставил цены

if (res.length==0)	 
 document.querySelector('.show2').innerHTML = 'Отмечено '+res.length+' номеров.'+' Стоимость поля '+0+' руб.';
else
if (res.length<3)	 
 document.querySelector('.show2').innerHTML = 'Отмечено '+res.length+' номеров.'+' Стоимость поля '+20+' руб.';
else
if (res.length<4)	 
 document.querySelector('.show2').innerHTML = 'Отмечено '+res.length+' номеров.'+' Стоимость поля '+40+' руб.';
 else
if (res.length<5)	 
 document.querySelector('.show2').innerHTML = 'Отмечено '+res.length+' номеров.'+' Стоимость поля '+60+' руб.';
 else
  document.querySelector('.show2').innerHTML = 'запрет на выбор ячеек';
  
  document.querySelector('.show3').innerHTML =  res , '0 0 0 0 0 0 0';

но это наверное самый простой способ? и в строке

document.querySelector('.show3').innerHTML =  res , '0 0 0 0 0 0 0';

как я понял если ничего не выделено то по идеи должно высветится "0 0 0 0 0 0 0", но выходит пустое поле и если выбор больше 7 клеток как сделать запрет на выделение ячеек (крестиков).

рони	05.01.2016 23:17

Цитата:

Сообщение от leon2009sp

больше 7 клеток как сделать запрет

смотрите строку 46 пост 10, алерт можно убрать, остальное сами.

Часовой пояс GMT +3, время: 11:59.