javascript - 单击 HTML 表格行并打开带有预填充数据的表单
问题描述
我一般是编码新手。我已经自学了基本的 HTML、CSS 和 Javascript，以尝试构建一个简单的 Web 应用程序来帮助我的码头更高效地运行。我已经在这方面工作了至少 6 个小时，但找不到实现它的方法。
我想要做的是让我的技术人员搜索由 Google 表格动态填充的 HTML 表格，当他们单击他们想要处理的客户的行时，我需要它来打开带有客户名称、船只名称和工作订单号已预先填写。感谢您提供的任何帮助。
每个技术人员用来输入他们的姓名、客户名称、船名、工作订单号、人工和花费的时间描述以及零件编号和零件数量的表单页面。这是我希望在技术人员单击他们希望添加时间和部分的条目后预加载 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>
解决方案
推荐阅读
- c++ - 解决#define与结构成员的冲突
- flutter - 使用依赖项/插件发布 Flutter 应用程序
- postgresql - 如何提高我的 postgres 查询的选择速度？
- odoo - 关于传递参数的 Odoo 10 XML RPC 问题
- php - 如何使用表单中的内容将文件写入服务器？
- typescript - 使用 TS\ES6 getter 访问深层属性（如快捷方式）
- powershell - 退出循环并开始新的并行循环
- javascript - 我有一个分为 tabS 的表单，我想在移动到下一个选项卡之前验证表单元素输入
- entity-framework - 所有选择查询的 EF Read-Uncommitted
- javascript - 我怎样才能安排更多的div？