我尝试修复以下代码。该表格是从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>