问题
I want to be able to select a table cell then press a button to submit order data into the data cell thats selected. so when ordering someones food you select the table cell of the persons order then press the button corresponding with the item to be ordered and display it in their order cell (called type)
function openCity(evt, menuName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(menuName).style.display = "block";
evt.currentTarget.className += " active";
}
if (isset("entreeMushrooms")){} body {
background-color: #DCDCDC;
}
.tab {
overflow: hidden;
padding-left: 380px;
text-align: center;
background-color: #e67300;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tablinks {
vertical-align:middle;
text-shadow: 1px 1px #000000;
text-align:center;
border:1px solid #ccc;
font-size:18px;
font-weight:bold;
color:#e67300;
color: white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.entreeSize {
padding-left: 200px;
}
.entreeItem {
vertical-align:middle;
text-shadow: 1px 1px #000000;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:225px;
height:45px;
background-color:#e67300;
color:#ffffff;
border-radius: 5px;
cursor: pointer;
}
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 1000px;
background-color: white;
margin-right: 100px;
margin: auto;
text-shadow: 1px 1px #000000;
font-size:16px;
font-weight:bold;
background-color:#e67300;
color:#ffffff;
}
.tableAlign{
text-align: center;
padding-right: 100px;
padding-left: 100px;
}
td {
height: 20px;
vertical-align: bottom;
}
.entreeTable {
padding-right: 5%;
margin-left: auto;
margin-right: auto;
}
.name {
vertical-align:middle;
text-shadow: 1px 1px #000000;
text-align:center;
border:1px solid #000000;
font-size:16px;
font-weight:bold;
width:130px;
height:35px;
background-color:#e67300;
color:#ffffff;
border-radius: 7px;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Screen</title>
</head>
<!-- Editable Table for Entrees -->
<body>
<div class="entreeTable">
<table style="text-align:center;">
<!-- Shows name in log out button -->
<?php session_start();
$myfile = fopen("employeeNames.txt", "r") or die("Unable to open file!");
//reads raw file
$string = fread($myfile,filesize("employeeNames.txt"));
//turns the string to array
$a = explode(',', $string);
foreach ($a as $result) {
$b = explode('. ', $result);
$names[trim($b[0])] = trim($b[1]);
}
//closes file
fclose($myfile);
@$username = @$names[$_SESSION['code']];
?>
<form action="keypad.php">
<input type="submit" name="Return" class="name" value="<?php echo($username); ?>">
</form>
<div class="tableAlign">
<br>
<tr>
<td width="50px">Cover</td>
<td width="250px">Type</td>
<td width="50px">Cover</td>
<td width="250px">Type</td>
</tr>
<tr>
<td width="50px">1</td>
<td width="250px"><div contenteditable></div></td>
<td width="50px">6</td>
<td width="250px"><div contenteditable></div></td>
<tr>
<td width="50px">2</td>
<td width="250px"><div contenteditable></div></td>
<td width="50px">7</td>
<td width="250px"><div contenteditable></div></td>
</tr>
<tr>
<td width="50px">3</td>
<td width="250px"><div contenteditable></div></td>
<td width="50px">8</td>
<td width="250px"><div contenteditable></div></td>
</tr>
<tr>
<td width="50px">4</td>
<td width="250px"><div contenteditable></div></td>
<td width="50px">9</td>
<td width="250px"><div contenteditable></div></td>
</tr>
<tr>
<td width="50px">5</td>
<td width="250px"><div contenteditable></div></td>
<td width="50px">10</td>
<td width="250px"><div contenteditable></div></td>
</tr>
</table>
</div>
</div>
</div>
<br><br><br><br>
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Entree')">Entree</button>
<button class="tablinks" onclick="openCity(event, 'From the Grill')">From the Grill</button>
<button class="tablinks" onclick="openCity(event, 'Dessert')">Dessert</button>
<button class="tablinks" onclick="openCity(event, 'Soft Drinks')">Soft Drinks</button>
<button class="tablinks" onclick="openCity(event, 'Beer')">Beer</button>
<button class="tablinks" onclick="openCity(event, 'Wines')">Wines</button>
</div>
<!-- Tab content -->
<div id="Entree" class="tabcontent">
<div class="entreeSize">
<input type="submit" class="entreeItem" name="entreeMushrooms" value="Baked Garlic Mushrooms">
<input type="submit" class="entreeItem" name="entreeHalloumi" value="Fried Halloumi Cheese">
<input type="submit" class="entreeItem" name="entreeKebab" value="Chicken Breast Kebab">
<input type="submit" class="entreeItem" name="entreeSkewer" value="Tiger Prawn Skewer"> <br><br>
<input type="submit" class="entreeItem" name="entreeRibs" value="Pork Spare Ribs">
<input type="submit" class="entreeItem" name="entreeBoerewoers" value="Grilled Boerewoers">
<input type="submit" class="entreeItem" name="entreePork" value="Grilled Pork Belly">
<input type="submit" class="entreeItem" name="entreeCutlets" value="Lamb Cutlets"><br><br>
<input type="submit" class="entreeItem" name="entreePlatter" value="Mixed Platter for 2">
</div>
</div>
<div id="From the Grill" class="tabcontent">
<div class="entreeSize">
<input type="submit" class="entreeItem" name="mainRump" value="Rump">
<input type="submit" class="entreeItem" name="mainPorterhouse" value="Porterhouse">
<input type="submit" class="entreeItem" name="mainEyeFillet" value="Eye Fillet">
<input type="submit" class="entreeItem" name="mainScotchFillet" value="Scotch Fillet">
<input type="submit" class="entreeItem" name="mainRibEye" value="Rib Eye on the Bone">
<input type="submit" class="entreeItem" name="mainTBone" value="T-Bone">
<input type="submit" class="entreeItem" name="mainCutlets" value="Lamb Cutlets">
<input type="submit" class="entreeItem" name="mainBreast" value="Chicken Breast">
<input type="submit" class="entreeItem" name="mainSalmon" value="Atlantic Salmon">
<input type="submit" class="entreeItem" name="mainVegMeal" value="Vegetarian Meal">
<input type="submit" class="entreeItem" name="mainPorkRibs" value="Pork Spare Ribs">
</div>
</div>
<div id="From the Grill" class="tabcontent">
<h3>From the Grill</h3>
</div>
<div id="Dessert" class="tabcontent">
<h3>Dessert</h3>
</div>
<div id="Soft Drinks" class="tabcontent">
<h3>Soft Drinks</h3>
</div>
<div id="Beer" class="tabcontent">
<h3>Beer</h3>
</div>
<div id="Wines" class="tabcontent">
<h3>Wines</h3>
</div>
</body>
</html>来源：https://stackoverflow.com/questions/56624632/how-to-submit-button-info-into-selected-table