Полностью динамические HTML-таблицы Hover События не работают - PullRequest
Новая
       5

Полностью динамические HTML-таблицы Hover События не работают

0 голосов
/ 25 мая 2018

Я пытаюсь создать таблицу без какой-либо предыдущей информации в документе HTML.

В этом примере ниже я хотел бы создать таблицу, затем заголовок и строку.Предположим, что макет таблицы в реальной программе находится в наборах <tr><th> и <tr><td> (строка заголовка, а затем строка ячейки).

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

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

var statTable = $('<table>', {"id": "statTable", "class": "statTable"});

$("#tableCreate").click(function() {
  $("#newDiv").append(statTable);
  $("#statTable").append("<tbody>");
  $(this).prop('disabled', true);
});

$("#setCreate").click(function() {
  $("tbody").append($("<tr>")).append($("<th>").text("HEADER"));
  $("tbody").append($("<tr>")).append($('<td>').text("TESTING..."));
});

$("#statTable tr").hover(function() {
  $(this).prev().find('th').removeClass('green');
  $(this).prev().find('th').addClass('red');
}, function() {
  $(this).prev().find('th').removeClass('red');
  $(this).prev().find('th').addClass('green');
});
td {
  border: 1px solid black;
}

th {
  background-color: green;
  border: 1px solid black;
}

.red {
  background-color: red !important;
}

.green {
  background-color: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<button id="tableCreate">make table </button>
<button id="setCreate">add set</button>

<div id="newDiv">
</div>
</html>

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Вам необходимо связать событие click следующим образом и связать его для td 

$(document).on("mouseenter", "#statTable td", function() {
  alert('in'); // add your logic
});

$(document).on("mouseleave", "#statTable td", function() {
  alert('out');
});
0 голосов
/ 25 мая 2018

Это потому, что когда вы привязываете событие к элементу, оно должно существовать.

Хотя есть хитрость для этого.Вместо привязки события к элементу вы можете привязать его к документу и вызвать его только для определенного элемента.

Также у вас есть небольшая ошибка при добавлении th и td к tr.Я исправил это, и теперь он работает правильно.

Вот рабочий пример 

var statTable = $('<table>', {"id": "statTable", "class": "statTable"});

$("#tableCreate").click(function() {
  $("#newDiv").append(statTable);
  $("#statTable").append("<tbody>");
  $(this).prop('disabled', true);
});

$("#setCreate").click(function() {
  $("tbody").append($("<tr>").append($("<th>").text("HEADER")));
  $("tbody").append($("<tr>").append($('<td>').text("TESTING...")));
});

$(document).on({
  mouseenter: function() {
    $(this).prev().find('th').removeClass('green');
    $(this).prev().find('th').addClass('red');
  },
  mouseleave: function() {
    $(this).prev().find('th').removeClass('red');
    $(this).prev().find('th').addClass('green');
  }
}, "#statTable tr");
td {
  border: 1px solid black;
}

th {
  background-color: green;
  border: 1px solid black;
}

.red {
  background-color: red !important;
}

.green {
  background-color: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<button id="tableCreate">make table </button>
<button id="setCreate">add set</button>

<div id="newDiv">
</div>

</html>
0 голосов
/ 25 мая 2018

Используйте on вместо hover для динамического содержимого: 

$('#newDiv').on({
mouseenter: function () {
     $(this).prev().find('th').removeClass('green');
     $(this).prev().find('th').addClass('red');
},
mouseleave: function () {
    $(this).prev().find('th').removeClass('red');
    $(this).prev().find('th').addClass('green');
}
}, "#statTable tr");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...