Показывать подробности ячейки таблицы при щелчке по ячейке в модальном режиме или в виде всплывающего окна или диалогового окна предупреждения - PullRequest
Новая
       0

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

0 голосов
/ 15 апреля 2020

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

Например, если какой-либо пользователь нажмет на январь, он отобразит подробную информацию о событиях месяца января в виде диалогового окна с предупреждением / всплывающего окна или диалогового окна с предупреждением, которое впоследствии можно отменить с помощью кнопки закрытия.

Вот мой стол. 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>Events</h1>

<table>
  <tr>
    <th>Month</th>

  </tr>
  <tr>
    <td>January

<table>
  <tr>
    <td>Events</td>
  </tr>

  <tr>
    <td>This is information I want to show as modal when this January cell is clicked</td>
  </tr>

</table>

    </td>
 
  </tr>




  <tr>
    <td>February

<table>
  <tr>
    <td>Events</td>
  </tr>

  <tr>
    <td>This is information I want to show as modal when this Feburary cell is clicked</td>
  </tr>

</table>

    </td>
 
  </tr>

</table>
 
</body>
</html>

Возможно ли это. Спасибо за любую помощь заранее.

1 Ответ

1 голос
/ 15 апреля 2020

Надеюсь, это то, что вы спрашиваете?

Также я вижу, что вы не правильно используете tr и td s, как и ожидалось, вы должны сделать каждую строку для ex. january, feb et c ... и не создавать таблицу внутри td, так как приведенный ниже код проверяет строку, так как вы запрашивали другое содержимое, тоже в строке, которая может снова выдать предупреждение с только эти дочерние значения.

То, что я пытаюсь сказать, это попытаться упорядочить данные по строкам и с точки зрения данных. 

$("table tr").click(function() {
  alert($(this).children("td").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <h1>Events</h1>

  <table>
    <tr>
      <th>Month</th>

    </tr>
    <tr>
      <td>January

        <table>
          <tr>
            <td>Events</td>
          </tr>

          <tr>
            <td>This is information I want to show as modal when this January cell is clicked</td>
          </tr>

        </table>

      </td>

    </tr>




    <tr>
      <td>February

        <table>
          <tr>
            <td>Events</td>
          </tr>

          <tr>
            <td>This is information I want to show as modal when this Feburary cell is clicked</td>
          </tr>

        </table>

      </td>

    </tr>

  </table>

</body>

</html>

Вот пример того, чего вы можете достичь, или вы можете дополнительно изучить другие варианты: 

$(".MainTable tr").click(function() {
  alert($(this).children("td").text());
});
.MainTable,
tr,
td {
  border: 1px solid red;
  width: 80%;
}

.row td {
  display: flex;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

  <h1>Events</h1>

  <table class="MainTable">
    <tr>
      <th>Month</th>

    </tr>

    <tr class="row">
      <td>January
      </td>
      <td>Events</td>
      <td>
        This is information I want to show as modal when this January cell is clicked
      </td>
    </tr>

    <tr class="row">
      <td>
        February
      </td>
      <td>Events</td>
      <td>
        This is information I want to show as modal when this February cell is clicked
      </td>
    </tr>

  </table>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...