Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
1 / 1 / 0
Регистрация: 07.04.2016
Сообщений: 40
1

Перемещение картинки из одной ячейки таблицы в другую при двойном щелчке мыши

21.10.2016, 14:59. Показов 1744. Ответов 9
Метки нет (Все метки)

Здравствуйте! Обращаюсь сюда за помощью, так как у меня не получается справиться с этой задачей.
У меня по умолчанию в первой ячейке таблицы вставлена картинка. Мне нужно, чтобы при двойном клике любой ячейки картинка перемещалась в неё. Буду рад любой подсказке.
Javascript
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Получение объекта события</title>
<style>
td,th{border: 1px double #DC0DCE;}
table{border:3px solid #D81114;background:#FDA7A8;}
</style>
</head>
 
<body>
<script type="text/javascript">
var newTable = document.createElement('table');
newTable.id = 'tablell';
newTable.setAttribute('width','70%');
newTable.setAttribute('border','3');
newTable.setAttribute('align','center');
document.body.appendChild(newTable);
 
for(var i = 0; i < 5; ++i){
    var newTr = document.createElement('tr');
    document.body.children[1].appendChild(newTr);
    
    for(var j = 0; j < 3; ++j){
        var newTd = document.createElement('td');
        document.body.children[1].children[i].appendChild(newTd);
    newTd.innerHTML = 'Ячейка';
    }
}
 
var elem1 = document.createElement("img");
elem1.setAttribute('src','image.jpg');
elem1.setAttribute('alt','картинка');
document.body.children[1].children[0].children[0].appendChild(elem1);
var mas;
for(var i = 0; i < 5; ++i)
{
    for(var j = 0; j < 3; ++j)
    {
        document.body.children[1].children[i].children[j].ondblclick = function(){
            mas[i+j] = elem1;
            document.body.children[1].children[i].children[j].appendChild(mas[i+j]);
        }
    }
}
</script>
</body>
</html>
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.10.2016, 14:59
Ответы с готовыми решениями:

Перемещение данных из одной ячейки таблицы в другую.
Всем привет! Подскажите пожалуйста, как переместить данные из одной ячейки таблицы (stringgrid) в...

При двойном щелчке мыши по картинке она должна увеличиваться в размерах
Всем привет!!! В ходе решения задачи столкнулся с проблемой, помогите ПЛИЗЗ onDblclick При...

Чтобы выскакивало меню при двойном щелчке мыши на линию или автофигуру
Добрый вечер. Интересует такой вопрос: 1) Мне необходимо, чтобы выскакивала меню при двойном...

Перемещение из одной таблицы в другую
Имеется Форма &quot;ФормаВыбора&quot; в Справочнике &quot;Номенклатура&quot;, там две таблицы &quot;Список&quot; и...

9
Эксперт JS
2061 / 1428 / 556
Регистрация: 11.07.2016
Сообщений: 3,377
21.10.2016, 15:11 2
Средствами jQuery:
Javascript
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
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>Получение объекта события</title>
<style>
td,th{border: 1px double #DC0DCE;}
table{border:3px solid #D81114;background:#FDA7A8;}
</style>
</head>
 
<body>
<script type="text/javascript">
var newTable = document.createElement('table');
newTable.id = 'tablell';
newTable.setAttribute('width','70%');
newTable.setAttribute('border','3');
newTable.setAttribute('align','center');
document.body.appendChild(newTable);
 
for(var i = 0; i < 5; ++i){
    var newTr = document.createElement('tr');
    document.body.children[1].appendChild(newTr);
    
    for(var j = 0; j < 3; ++j){
        var newTd = document.createElement('td');
        document.body.children[1].children[i].appendChild(newTd);
    newTd.innerHTML = 'Ячейка';
    }
}
 
var elem1 = document.createElement("img");
elem1.setAttribute('src','image.jpg');
elem1.setAttribute('alt','картинка');
document.body.children[1].children[0].children[0].appendChild(elem1);
 
$('td').dblclick(function() {
    $(this).append($('img'));
});
</script>
</body>
</html>
На чистом JS - не подскажу
1
Модератор
Эксперт JSЭксперт HTML/CSS
3748 / 2646 / 1516
Регистрация: 12.07.2015
Сообщений: 6,644
Записей в блоге: 4
21.10.2016, 16:56 3
Т.к. как мы в разделе нативного JS, а JQ находится чуть выше:
CSS
1
2
3
td,th {border: 1px double #DC0DCE;}
table {border: 3px solid #D81114; background: #FDA7A8;}
td{min-width:100px;}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<table id="myTable">
  <tr>
    <td><img src="https://www.cyberforum.ru/images/cyberforum_logo.png" id="myImg" alt="" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var img = document.getElementById('myImg'),
  table = document.getElementById('myTable');
 
table.addEventListener('dblclick', function(elem) {
  var target = elem.target;
  if (target != img) {
    while (target.tagName != 'TR') {
      if (target.tagName == 'TD') {
        target.appendChild(img);
        break;
      }
      target = target.parentElement;
    }
  }
})
Песочница

Добавлено через 1 час 20 минут
Вот, полный код, с созданием таблиц, чуть упростил
HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .my-table{border:2px solid black;border-collapse:collapse;table-layout:fixed;margin:0 auto;width:800px;}
    .my-td{border:1px solid black;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
  </style>
  <script>
    var newTable = document.createElement('table'),
    newTr = document.createElement('tr'),
    newTd = document.createElement('td'),
    newImg = document.createElement('img'),
    columns = 5,
    rows = 3;
 
  newTable.id = 'tablell';
  newTable.classList.add('my-table');
  newTd.classList.add('my-td');
  newTd.innerHTML = '&nbsp';
  newImg.src = 'https://www.cyberforum.ru/images/cyberforum_logo.png';
  newImg.id = 'myImg';
  newImg.alt = 'Картинка'
 
  for (var j = 0; j < rows; j++) { 
    newTr.appendChild(newTd.cloneNode(true))
  }
  for (var i = 0; i < columns; i++) { 
    newTable.appendChild(newTr.cloneNode(true))
  }
 
  document.body.appendChild(newTable);
  document.querySelector('.my-td').appendChild(newImg);
 
  newTable.addEventListener('dblclick', function(elem) {
    var target = elem.target;
    if (target != newImg) {
      while (target.tagName != 'TR') {
        if (target.tagName == 'TD') {
          target.appendChild(newImg);
          break;
        }
        target = target.parentElement;
      }
    }
  })
  </script>
</head>
<body>
</body>
</html>
Песочница
1
супермизантроп
Эксперт JS
3869 / 2943 / 685
Регистрация: 18.04.2012
Сообщений: 8,562
21.10.2016, 18:42 4
csgorulit, mrtoxas:
1. для создания строки вместо двух методов createElement () и appendChild () разумнее использовать один метод insertRow ()

2. для создания ячейки вместо двух методов createElement () и appendChild () разумнее использовать один метод insertCell ()
1
Модератор
Эксперт JSЭксперт HTML/CSS
3748 / 2646 / 1516
Регистрация: 12.07.2015
Сообщений: 6,644
Записей в блоге: 4
21.10.2016, 22:30 5
HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .my-table{border:2px solid black;border-collapse:collapse;table-layout:fixed;margin:0 auto;width:800px;}
    .my-td{border:1px solid black;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
  </style>
  <script>
    var newTable = document.createElement('table'),
      newImg = document.createElement('img'),
      colAmount = 3,
      rowsAmount = 5;
    newTable.classList.add('my-table');
    newImg.src = 'https://www.cyberforum.ru/images/cyberforum_logo.png';
    newImg.alt = 'Картинка';
    for (var i = 0; i < rowsAmount; i++) {
      var newRow = newTable.insertRow(-1);
      for (var j = 0; j < colAmount; j++) {
        var newCell = newRow.insertCell(-1)
        newCell.classList.add('my-td');
        newCell.innerHTML = '&nbsp';
        if (i == 0 && j == 0) {
          newCell.appendChild(newImg)
        }
      }
    }
    document.body.appendChild(newTable);
    newTable.addEventListener('dblclick', function(elem) {
      var target = elem.target;
      if (target != newImg) {
        while (target.tagName != 'TR') {
          if (target.tagName == 'TD') {
            target.appendChild(newImg);
            break;
          }
          target = target.parentElement;
        }
      }
    })
  </script>
</head>
<body>
</body>
</html>
0
супермизантроп
Эксперт JS
3869 / 2943 / 685
Регистрация: 18.04.2012
Сообщений: 8,562
22.10.2016, 17:31 6
mrtoxas, аргументом безымянной функции, назначенной на событие dblclick, является событие event: именовать его elem -- это, имхо, слишком креативно
0
Модератор
Эксперт JSЭксперт HTML/CSS
3748 / 2646 / 1516
Регистрация: 12.07.2015
Сообщений: 6,644
Записей в блоге: 4
22.10.2016, 17:46 7
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
newTable.addEventListener('dblclick', function() {
      var target = event.target;
      if (target != newImg) {
        while (target != newTable) {
          if (target.tagName == 'TD') {
            target.appendChild(newImg);
            break;
          }
          target = target.parentElement;
        }
      }
    })
Тааак, что тут еще можно переделать...
0
супермизантроп
Эксперт JS
3869 / 2943 / 685
Регистрация: 18.04.2012
Сообщений: 8,562
22.10.2016, 18:41 8
mrtoxas, newTable.addEventListener('dblclick', function (а почему здесь теперь пусто?)

я указал вам, что именно elem внутри скобок -- это не очень удачное имя для переменной, обозначающей объект события , но не писал, что там вообще ничего не должно быть
0
Модератор
Эксперт JSЭксперт HTML/CSS
3748 / 2646 / 1516
Регистрация: 12.07.2015
Сообщений: 6,644
Записей в блоге: 4
22.10.2016, 18:55 9
Так оно и без этого возвращает event нормально

Добавлено через 10 минут
Хотя, смотрю, в примерах к документации указывают что-то в скобках.
0
супермизантроп
Эксперт JS
3869 / 2943 / 685
Регистрация: 18.04.2012
Сообщений: 8,562
23.10.2016, 03:08 10
Цитата Сообщение от mrtoxas Посмотреть сообщение
оно и без этого возвращает event нормально
в MSIE возвращает, а в прочих браузерах переменная event, не указанная как параметр функции, не будет определена
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.10.2016, 03:08

Перемещение записей из одной таблицы в другую
Здравствуйте! Помогите пожалуйста разобраться как реализовать следующее: Есть две таблицы товар...

Перемещение данных из одной таблицы в другую
Вопрос о перемещении данных из одной таблицы в другую. Много искал информации и нашел, но для...

Перемещение записей из одной таблицы в другую
Всем hello!!! Есть две таблицы в access подключил в Delphi, как сделать так чтобы записи можно было...

Перемещение Blob полей с одной таблицы в другую
Очень надо переместить Blob поле с одной таблицы в другую. Для отображения данных я использую...


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

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

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