Блог

Главная - Вопросы по программированию - Щелкните строку таблицы HTML и откройте форму с предварительно заполненными данными

Щелкните строку таблицы HTML и откройте форму с предварительно заполненными данными

#javascript #html #google-apps-script

#javascript #HTML #google-приложения-скрипт

Вопрос:

Я новичок в кодировании в целом. Я самостоятельно изучил основы HTML, CSS и JavaScript, чтобы попытаться создать простое веб-приложение, которое поможет моей марине работать более эффективно. Я работаю над этим аспектом не менее 6 часов и не могу найти способ сделать это.

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

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

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
   <?!= include("page-css") ?>
 
 </head>

<body>
  
    <a href = "https://script.google.com/a/obmc.com/macros/s/AKfycbxGT-s3hnCXs4gI-E0Qo5-C87M5yeDd3FhLto6txnQ/exec" id = "labor" class="waves-effect waves-light btn indigo darken-4"><i class="material-icons left">chevron_left</i>Home</a>
   
   
   <div class = "container">
    <h1>Labor Entry </h1>
    </div>

      
      <div class = "container">
      <div class="row">
        <div class="input-field col s12 m8 l8">
         <div class="text">Tech</div>
          <input type="text" id="tech" class="autocomplete">
         </div>
      </div>
     </div>

     
     <div class = "container">
      <div class="row">
        <div class="input-field col s12 m8 l8">
           <div class="text">Customer Name</div>
          <input type="text" id="customer" class="autocomplete">
        </div>
       </div> 
      </div>
      
      
      
      <div class = "container">
       <div class="row">
        <div class="input-field col s12 m8 l8">
         <div class="text">Boat Name</div>
          <input id="boat" type="text" class="validate">
        </div>
       </div>
       </div>

      <div class = "container">
      <div class="row">
       <div class="input-field col s12 m6 l6">
        <div class="text">Work Order</div>
         <input type="text" id="work order">
          
        </div>
       </div> 
      </div> 
     
     
     <div class = "container">
     <div class="row">
        <div class="input-field col s6 m6 l6">
           <div class="text">Description of Work</div>
          <textarea id="desc" class="materialize-textarea"></textarea>
        </div>  

        
        <div class="row">
        <div class="input-field col s2 m2 l2">
                <div class="text">Hours</div>
          <input id="time" type="text" class="validate">
        </div>
      </div>
      </div>
     </div>
     
     <div class = "container">
      <div class="row">
        <div class="input-field col s12 m8 l8">
           <div class="text">Part Number</div>
          <input type="text" id="part" class="autocomplete">
        </div>
 
 
 
        
        <div class="input-field col s2 m2 l2">
                <div class="text">Quantity</div>
          <input id="qty" type="text" class="validate">
        </div>
      </div>
</div>

     
          <div class = "container">
        <div class="row">
     <button id = "submit" class="btn- waves-effect waves-light btn-large indigo darken-4"><i class="material-icons left">directions_boat</i>Submit</button>
       
     <button id = "clear" class="waves-effect waves-light btn-large indigo darken-4"><i class="material-icons left">clear_all</i>Clear Form</button>
        </div> <!-- CLOSE ROW -->
          </div>  <!-- CLOSE CONTAINER -->
          
          
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <?!= include("page-js") ?>
             
  </body>
</html>

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

 <!DOCTYPE html>
<html lang="en-US">
<head>
    <title>JavaScript Table Filter Search</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        h3 span {
            font-size: 22px;
        }
        h3 input.search-input {
            width: 300px;
            margin-left: auto;
            float: right
        }
        .mt32 {
            margin-top: 32px;
        }
    </style>
</head>
<body class="mt32">
    <div class="container">
        <h1 align = "center">
            <span>Work Order Search</span>
            <input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/>
        </h1>
        <table class="table table-striped mt32 customers-list" id = "display-table" onclick="theFunction()" >
            <thead>
                <tr>
                    <th align ="center">Customer Name</th>
                    <th align ="center">Boat Name</th>
                    <th align ="center">Work Order</th>
                    <th align ="center">Description of Work</th>
                </tr>
            </thead>
            <tbody id = "table-body">
                
            </tbody>
        </table>
    </div>
    <script>
        (function(document) {
            'use strict';

            var TableFilter = (function(myArray) {
                var search_input;

                function _onInputSearch(e) {
                    search_input = e.target;
                    var tables = document.getElementsByClassName(search_input.getAttribute('data-table'));
                    myArray.forEach.call(tables, function(table) {
                        myArray.forEach.call(table.tBodies, function(tbody) {
                            myArray.forEach.call(tbody.rows, function(row) {
                                var text_content = row.textContent.toLowerCase();
                                var search_val = search_input.value.toLowerCase();
                                row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none';
                            });
                        });
                    });
                }

                return {
                    init: function() {
                        var inputs = document.getElementsByClassName('search-input');
                        myArray.forEach.call(inputs, function(input) {
                            input.oninput = _onInputSearch;
                        });
                    }
                };
            })(Array.prototype);

            document.addEventListener('readystatechange', function() {
                if (document.readyState === 'complete') {
                    TableFilter.init();
                }
            });

        })(document)
        
        var data = []
        
        document.addEventListener("DOMContentLoaded",function(){
        
        google.script.run.withSuccessHandler(generateTable).getTableData()
        
             
              
        })
        
        
 function generateTable(dataArray){
 
 dataArray.forEach(function(r){
    var tbody = document.getElementById("table-body")
        var row = document.createElement("tr")
        var col1 = document.createElement("td")
        col1.textContent = r[0]
        var col2 = document.createElement("td")
        col2.textContent = r[1]
        var col3 = document.createElement("td")
        col3.textContent = r[2]
        var col4 = document.createElement("td")
        col4.textContent = r[3]
        row.appendChild(col1)
        row.appendChild(col2)
        row.appendChild(col3)
        row.appendChild(col4)
        tbody.appendChild(row)
        
        })
 
 
 
 }


                
    </script>
</body>
</html>

Комментарии:

1. Спасибо. Я все еще не очень хорошо добавляю вопросы.

2. Теперь ваш пост понятен, но с какой проблемой вы столкнулись? Есть ли какая-то конкретная вещь, которая не работает или ничего не работает?

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

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

5. Пожалуйста, дайте мне знать, если есть что-то еще, что я могу объяснить, чтобы облегчить помощь. У меня есть таблица HTML, которая состоит из «Имени клиента», «Названия судна», «Заказа на работу» и «Описания работы». Таблица фильтруется по типу технологий, и я хочу, чтобы они могли щелкнуть строку таблицы HTML и открыть страницу формы с уже заполненными «Именем клиента», «Названием судна» и «заказом на работу», чтобы технический специалист мог просто добавить свое время или деталии отправьте форму. Спасибо за любую помощь.