Javascript 将数据插入文本输入字段_Javascript_Html

Javascript 将数据插入文本输入字段

javascript html

Javascript 将数据插入文本输入字段,javascript,html,Javascript,Html,我有下面的代码，我正在尝试修复。该表由Google电子表格填充，当我单击其中一行时，我可以通知整行或数组中的单个项目。但是，我想做的是将数组中的值填充到搜索表下面的文本输入字段中。谢谢你能提供的任何帮助 <!DOCTYPE html> <html> <head> <base target="_top"> <meta name="viewport" content="widt

我有下面的代码，我正在尝试修复。该表由Google电子表格填充，当我单击其中一行时，我可以通知整行或数组中的单个项目。但是，我想做的是将数组中的值填充到搜索表下面的文本输入字段中。谢谢你能提供的任何帮助

<!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 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 table-bordered table-hover table-responsive mt32 customers-list font-weight-bold align-middle" id = "display-table" onclick="theFunction()">
            <thead class = "thead-dark">
                <tr class = "align-middle">                  
                    <th class = "text-center text-uppercase align-middle ">Customer Name</th>
                    <th class = "text-center text-uppercase align-middle">Boat Name</th>
                    <th class = "text-center text-uppercase align-middle">Work Order</th>
                    <th class = "text-center text-uppercase align-middle">Type</th>
                </tr>
            </thead>
            <tbody id = "table-body" class = "align-middle">
                
            </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).getTableData2()
        })
        
 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)
        
        })
 }

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            data.push(cells[i].innerHTML);
        }
    }

alert(data[1])
}    
    </script>
 
      <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>


工单搜索
客户名称
船名
工单
类型
（职能（文件）{
"严格使用",；
var TableFilter=（函数（myArray）{
var搜索输入；
函数_onInputSearch（e）{
搜索输入=e.目标；
var tables=document.getElementsByClassName（search_input.getAttribute（'data-table'）；
调用（表，函数（表）{
myArray.forEach.call（table.tBodies，函数（tbody）{
myArray.forEach.call（tbody.rows，函数（row）{
var text_content=row.textContent.toLowerCase（）；
var search_val=search_input.value.toLowerCase（）；
row.style.display=text\u content.indexOf（search\u val）>-1？“”：“无”；
});
});
});
}
返回{
init:function（）{
var inputs=document.getElementsByClassName（'search-input'）；
myArray.forEach.call（输入，函数（输入）{
input.oninput=\u onInputSearch；
});
}
};
})（阵列.原型）；
document.addEventListener（'readystatechange'，function（）{
如果（document.readyState==='complete'）{
TableFilter.init（）；
}
});
})（文件）
var数据=[]
document.addEventListener（“DOMContentLoaded”，function（））{
google.script.run.withSuccessHandler（generateTable.getTableData2（）
})
函数生成表（dataArray）{
dataArray.forEach（函数（r）{
var tbody=document.getElementById（“表体”）
var行=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]
行。追加子项（col1）
行。追加子项（col2）
行。追加子项（col3）
行。追加子项（col4）
tbody.appendChild（第行）
})
}
var table=document.getElementsByTagName（“表”）[0]；
var tbody=table.getElementsByTagName（“tbody”）[0]；
tbody.onclick=函数（e）{
e=e | | window.event；
var数据=[]；
var target=e.src元素| | e.target；
while（target&&target.nodeName！=“TR”）{
target=target.parentNode；
}
如果（目标）{
var cells=target.getElementsByTagName（“td”）；
对于（变量i=0；i

这是相当多的代码。是否可以将其简化为创建一个新的应用程序？