Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Faust-RK
0 / 0 / 0
Регистрация: 19.04.2015
Сообщений: 1
#1

Как исправить ошибку ломки HTML-таблицы? - JavaScript

19.04.2015, 12:55. Просмотров 216. Ответов 1
Метки нет (Все метки)

Народ, нужна помощь с проектом. Я самоучка, опыта не много в программировании и в некоторых моментах имеются трудности.
Пишу небольшое приложение, типа игры простенькой, на JavaScript, для одного сайта. Точнее сказать пытаюсь написать.

Описание: имеется 9 ячеек, по 3 строки и 3 столбца. В каждый столбец загружается одна из трех картинок - это фоновое изображение - в случайном порядке. В сами же 9 ячеек загружается одна одинаковая картинка, при клике на которую она скрывается (CSS, display:none), тем самым оставляя открытым фоновое изображение.

Проблема №1: при скрывании всех картинок, начинает ломаться размер таблицы. В начале ломался сильно, но потом смог поредактировать css, но размер все равно к сокрытию последних картинок продолжает ломаться.

Проблема №2: И еще... первый клик на картинку почему-то не запускает функцию click, а только со второго клика удается ее запустить.

Вопрос: Как можно организовать такую схему, что бы при клике на картинку можно было определить какое именно фоновое изображение загруженно в ячейку таблицы.

Предоставляю код проекта

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
<title>Hello jQuery world!</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
.table {width: 450; height: 450; background-color: #ffffff; bordercolor: #400000};
.td {width: 150; height: 150};
.tr {width: 150; height: 150};
</style>
</head>
<body>
<table class="table">
<tr class="tr">
<td clss="td" id="td0"><a href='javascript:click()' class="a_img" id="img_a0"><img src=images/artefact.jpg></a></td>
<td clss="td" id="td1"><a href='javascript:click()' class="a_img" id="img_a1"><img src=images/artefact.jpg></a></td>
<td clss="td" id="td2"><a href='javascript:click()' class="a_img" id="img_a2"><img src=images/artefact.jpg></a></td>
</tr>
<tr class="tr">
<td clss="td" id="td3"><a href='javascript:click()' class="a_img" id="img_a3"><img src=images/artefact.jpg></a></td>
<td clss="td" id="td4"><a href='javascript:click()' class="a_img" id="img_a4"><img src=images/artefact.jpg></a></td>
<td clss="td" id="td5"><a href='javascript:click()' class="a_img" id="img_a5"><img src=images/artefact.jpg></a></td>
</tr class="tr">
<tr>
<td clss="td" id="td6"><a href='javascript:click()' class="a_img" id="img_a6"><img src=images/artefact.jpg></a></td>
<td clss="td" id="td7"><a href='javascript:click()' class="a_img" id="img_a7"><img src=images/artefact.jpg></a></td>
<td clss="td" id="td8"><a href='javascript:click()' class="a_img" id="img_a8"><img src=images/artefact.jpg></a></td>
</tr>
</table>
 
<script type="text/javascript" language="javascript">
 
<!-- ФУНКЦИЯ СЛУЧАЙНОЙ СОРТИРОВКИ МАССИВА -->
Array.prototype.shuffle = function( b )
{
 var i = this.length, j, t;
 while( i ) 
 {
  j = Math.floor( ( i-- ) * Math.random() );
  t = b && typeof this[i].shuffle!=='undefined' ? this[i].shuffle() : this[i];
  this[i] = this[j];
  this[j] = t;
 }
 return this;
};
 
<!-- РАБОТА С МАССИВАМИ -->
var arr1 = new Array(1,2,3,4,5,6,7,8,9);                                         // Создание массива с числами от 1 до 9 в правильном порядке
var arr2 = arr1.shuffle();                                                       // Создание массива из предыдущего с применением функции случайного порядка 
 
<!-- alert( arr2.shuffle() ); -->                                                // Проверка генерации массива случайных чисел от 1 до 9, д/указания индекса в имени фонового изображения 
 
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!-- НАЧАЛО ВЫПОЛНЕНИЯ ЦИКЛА, 9 ПОВТОРЕНИЙ -->
var q;
for (q=0; q<9; q++){
 
<!-- ЗАГРУЗКА ФОНА ТАБЛИЦЫ -->
td="#td"+q;                                                                      // Присвоение переменной к номеру ячейки в таблице
fon="url(images/img"+arr2[q]+".png)";                                            // Присвоение переменной д/фонового изображения
$(td).css("background",fon);                                                     // Загрузка фонового изображения
}
<!-- ЗАВЕРШЕНИЕ ВЫПОЛНЕНИЯ ЦИКЛА, 9 ПОВТОРЕНИЙ -->
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 
function click(){
$(".a_img").click(function(){
id_click = $(this).attr("id");
d="#"+id_click;
$(d).css("display","none");
});
}
 
</script>
 
</body>
</html>
Так же предоставляю и сам проект в упакованном виде (т.к. используются графические вложения и библиотека jQuery).

Надеюсь на вашу помощь. Заранее спасибо.
0
Вложения
Тип файла: zip Test Project 9.zip (298.4 Кб, 2 просмотров)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.04.2015, 12:55
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Как исправить ошибку ломки HTML-таблицы? (JavaScript):

Как исправить ошибку - JavaScript
&lt;html&gt; &lt;head&gt; &lt;title&gt;Размер стипендии&lt;/title&gt; &lt;script language = &quot;JavaScript&quot;&gt; function st (obj ) {var a = Number(obj.num1.value)...

Как исправить маленькую ошибку - JavaScript
Добрый вечер. Помогите исправить ошибку в коде. Есть массив объектов. Данные в него записываются через вызов функции в консоли. ...

Подскажите как исправить ошибку в строке ? - JavaScript
Этой строке : !!checkMobileOperator.check(input.val()) &amp;&amp; submit.removeprop('disabled'); выбивает ошибку: Uncaught TypeError:...

Как исправить ошибку в данном коде? - JavaScript
function send_message() { var message = $(&quot;#message&quot;).val(); var touser = $(&quot;#message-to-user&quot;).text(); var private =...

Как исправить такую ошибку Uncaught TypeError: num.split is not a function? - JavaScript
Заранее спасибо!!!! Написать функцию, входным параметром которой является строка ,содержащая символьную запись числа в двоично -...

Как узнать количество строкстолбцов html таблицы - JavaScript
Таблица имеет атрибут id='main'.Как с помощью клиентского скрипта можно узнать количество строкстолбцов html таблицы? Возможно просто есть...

1
kalabuni
Нарушитель
3131 / 2480 / 443
Регистрация: 18.04.2012
Сообщений: 7,461
19.04.2015, 15:04 #2
кошмар
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
onload = function ()
{
var N = [], M = document.getElementById ('md').getElementsByTagName ('img');
for (j = 0, J = M.length; j < J; j++) N [j] = j + 1,
M [j].src = 'images/artefact.jpg', M [j].onclick = function () {with (this)
src = 'images/img' + N.splice ((Math.random () * N.length), 1) + '.png', onclick = ''}
}
</script>
<style>
#md {font-size: 0}
#md img {width: 150px; height: 150px; margin: 2px}
</style>
 
<div id="md">
   <img><img><img><br>
   <img><img><img><br>
   <img><img><img>
</div>
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.04.2015, 15:04
Привет! Вот еще темы с ответами:

Найти и исправить ошибку - JavaScript
Здравствуйте , пожалуйста помогите исправить ошибки в коде уже пол дня мучаюсь...... var foo = function() { var write =...

Помогите исправить ошибку - JavaScript
Добрый день!Помогите исправить ошибку,что бы ответы подсчитывались и в конце выдавал количество правильных ответов из всех имеющих. ...

Исправить ошибку в js коде - JavaScript
Не знаю в чем ошибка. При запуске скрипта он должен выводить все значения массива, а результат - только undefined function show() { ...

Исправить ошибку в программе - JavaScript
Здравствуйте.С помощью команды цикла напишите программу, которая требует у вас пароль, например 111. Если пароль правильный, то заполняет...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru