Ввод информации в HTML-таблицу

У меня есть html-таблица с некоторыми ячейками, которые должны иметь возможность вводить данные пользователя. Однако, когда я нажимаю на ячейку, ничего не происходит. Таблица является частью всплывающего экрана, который не является формой (не уверен, что она должна быть), он также вложен в набор полей.

<div class = "div_popup" id = "item_card">
  <fieldset id = "item_card_quote_info" style = "height: 25%; width: 95%; padding: 0%; margin:1%; ">
  <legend class = "dash_text" style = "margin-left: 1%; margin-right:3%; margin-bottom: 0.5%; padding-top: 0%"> Quote Information </legend>
    <table id = "ic_quote_pricing" style = " background-color:grey; 
                 width:100%; font-size: 14px; font-family: 'Arial'; ">
      <col width = "10%">
      <col width = "10%">
      <thead>
        <tr>
          <th >Cost</th>
          <th >Qty</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>
            <input id = "ic_q_unit_cost" style = "display: table-cell; width:100%" type = "text" >
          </td>
          <td>
              <input id = "ic_q_unit_qty" style = "display: table-cell; width: 100%" type = "text">
          </td>
        </tr>
      </tbody>
  </table>
</fieldset>
</div>

Я ценю любое руководство. Заранее спасибо.

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

— 06.07.2019 17:01

Он отлично работает с вашим кодом. Не так ли?? Вот он в КодПесочница

— 06.07.2019 17:02

@AbhinavKinagi Это странно. Это работает в вашей ссылке, но не в моем коде. надо будет все перепроверить

— 06.07.2019 17:06

@АбхинавКинаги. Моя таблица вложена в набор полей. Будет ли это иметь значение? Я не думаю, что это должно.

— 06.07.2019 17:08

Не должно! попробуйте опубликовать соответствующий код, если проблема все еще сохраняется.

— 06.07.2019 17:15

@АбхинавКинаги. Я добавил полный код. Таблица является частью всплывающего экрана с набором полей.

— 06.07.2019 17:20

html input html-table textbox tablecell

06.07.2019 16:40

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

некоторые.html

<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "styles.css">
</head>
<body>
<h1>Popup</h1>
<div class = "box">
    <a class = "button" href = "#popup1">Click me!</a>
</div>

<div id = "popup1" class = "overlay">
    <div class = "popup">
        <fieldset id = "item_card_quote_info" style = "height: 25%; width: 95%; padding: 0%; margin:1%; ">
        <legend class = "dash_text" style = "margin-left: 1%; margin-right:3%; margin-bottom: 0.5%; padding-top: 0%"> Quote Information </legend>
          <table id = "ic_quote_pricing" style = " background-color:grey; 
                       width:100%; font-size: 14px; font-family: 'Arial'; ">
            <col width = "10%">
            <col width = "10%">
            <thead>
              <tr>
                <th >Cost</th>
                <th >Qty</th>
              </tr> 
            </thead>
            <tbody>
              <tr>
                <td>
                  <input id = "ic_q_unit_cost" style = "display: table-cell; width:100%" type = "text" >
                </td>
                <td>
                    <input id = "ic_q_unit_qty" style = "display: table-cell; width: 100%" type = "text">
                </td>
              </tr>
            </tbody>
        </table>
      </fieldset>
    </div>
</div>
</body>
</html>

стили.css

body {
  font-family: Arial, sans-serif;
  background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #06D85F;
  margin: 80px 0;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

Это возможность. Я проверяю это спасибо.

— 06.07.2019 17:55

Моя проблема в том, что, делая всплывающее окно перетаскиваемым, оно отключает элементы для ввода.

— 06.07.2019 18:07

06.07.2019 17:45

Моя проблема заключалась в том, что, делая всплывающее окно перетаскиваемым, я отключал события onmousedown по умолчанию для полей ввода.

06.07.2019 18:13