Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.11.2018, 13:48
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Не там много вкладок, удобнее клавиатуру вытаскивать после. Выглядят вкладки примерно так:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
<table class="table table-bordered table-hover  testTable">
    <thead>
         <tr class="bg-info text-white">
               <td>Ячейка 1</td>
                      <td>Ячейка 2</td>
          </tr>
     </thead>
     <tbody>
           <tr>
              <td>тест1</td>
               <td></td>
          </tr>
           <tr>
              <td>тест1</td>
               <td></td>
          </tr>
      </tbody>
</table>
</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"><table class="table table-bordered table-hover  testTable">
    <thead>
         <tr class="bg-info text-white">
               <td>Ячейка 3</td>
                      <td>Ячейка 4</td>
          </tr>
     </thead>
     <tbody>
           <tr>
              <td>тест2</td>
               <td></td>
          </tr>
           <tr>
              <td>тест2</td>
               <td></td>
          </tr>
      </tbody>
</table></div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"><table class="table table-bordered table-hover  testTable">
    <thead>
         <tr class="bg-info text-white">
               <td>Ячейка 5</td>
                      <td>Ячейка 6</td>
          </tr>
     </thead>
     <tbody>
           <tr>
              <td>тест3</td>
               <td></td>
          </tr>
           <tr>
              <td>тест3</td>
               <td></td>
          </tr>
      </tbody>
</table></div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"><table class="table table-bordered table-hover  testTable">
    <thead>
         <tr class="bg-info text-white">
               <td>Ячейка 7</td>
                      <td>Ячейка 8</td>
          </tr>
     </thead>
     <tbody>
           <tr>
              <td>тест5</td>
               <td></td>
          </tr>
           <tr>
              <td>тест5</td>
               <td></td>
          </tr>
      </tbody>
</table></div>
    </div>
  </div>
</div>


Все это в цикле создается.
Там особо некуда input просто так засунуть)

Последний раз редактировалось Artur_Hopf, 13.11.2018 в 13:52.
Ответить с цитированием
  #12 (permalink)  
Старый 13.11.2018, 13:57
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Или так - одноразовый input
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="row">
<div class="col-2">

  </div>
<div class="col-9">
  <table class="table table-bordered table-hover  testTable table-sm">
    <thead>
       <tr class="bg-info text-white">
         <td>Ячейка 1</td>
           <td>Ячейка 2</td>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>тест</td>
           <td></td>
        </tr>
        <tr>
            <td>тест2</td>
            <td></td>
        </tr>
     </tbody>
   </table>
</div>
<script>
var tableTd;
$('.testTable').on('click', 'td', function () {
            var that = $(this).next('td');
            that.html('<input type="text" >');
             that.find('input').on('change', function () { 
                  that.html($(this).val());
             });
});


</script>

Последний раз редактировалось Dilettante_Pro, 13.11.2018 в 14:02.
Ответить с цитированием
  #13 (permalink)  
Старый 13.11.2018, 14:37
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Dilettante_Pro,
Тоже не удобно. Нужно делать три нажатия пальцем, вместо двух =)
Ответить с цитированием
  #14 (permalink)  
Старый 13.11.2018, 15:18
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Artur_Hopf,
Сообщение от Artur_Hopf
Нужно делать три нажатия пальцем, вместо двух
Какие три вместо каких двух?
По вашему варианту:
1. Ткнуть в ячейку таблицы
2. Ткнуть в input. Открывается клавиатура - вводится текст.
3. Ткнуть в button.
По моему:
1. Ткнуть в ячейку таблицы
2. Ткнуть в input. Открывается клавиатура - вводится текст.
Ответить с цитированием
  #15 (permalink)  
Старый 13.11.2018, 16:52
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Dilettante_Pro,
Там клава с пол экрана, с ней удобнее )
Изображения:
Тип файла: jpg test.jpg (43.5 Кб, 5 просмотров)
Тип файла: jpg test2.jpg (67.4 Кб, 2 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Угадай число. Помогите написать скрипт и по возможности объяснить, как работает Vadim Zhizherin Общие вопросы Javascript 3 04.05.2018 21:09
Как при клику по кнопке проверять введен ли правильный email и выполнять функцию? INSIDER73 Events/DOM/Window 0 14.11.2017 16:50
Как создается function Function(){} ? Cepairda Общие вопросы Javascript 0 10.02.2016 15:03
Как сбросить сценарий кликнув по кнопке? alex72bel Общие вопросы Javascript 0 15.01.2016 19:55
1092*0.15=? А на javascript? Как это объяснить бухгатеру? oid Общие вопросы Javascript 15 24.10.2009 12:51