【发布时间】：2020-11-13 17:06:45
【问题描述】：
我目前正在尝试解决分配给我的学校作业，但我正在努力解决一个非常简单的问题。
我试图在同一行中保留一个简单的 html 和 js 计算器和一个 json 表，但我还没有设法做到这一点，我已经尝试了一段时间。我只留下下面的 html 代码，因为问题存在而不是脚本中。帮助表示赞赏！ PS。使用引导程序
<html lang="en">
<head>
<title>Página de teste BOOSTRAP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css" />
<style>
.page-footer {
background-color: #222;
color: #ccc;
padding: 60px 0 30px;
}
.footer-copyright {
color: #666;
padding: 40px 0;
}
#tabela {
height: 100%;
width:50%;
}
#Calc {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="description">
<h1>Bem-vindo à minha Landing Page!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.
</p>
</div>
</header>
<form name="Calculadora">
<div id="display" class="row mt-5 mb-5 ml-1 mr-1">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<table id="Calc" width="100%" class="table">
<tbody>
<tr><td colspan="4"><input type="text" id="resultados" class="form-control" /></td></tr>
<tr><td><button type="button" class="btn btn-secondary" onclick="addVal(7);">7</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(8);">8</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(9);">9</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('+');">+</button></td></tr>
<tr><td><button type="button" class="btn btn-secondary" onclick="addVal(4);">4</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(5);">5</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(6);">6</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('-');">-</button></td></tr>
<tr><td><button type="button" class="btn btn-secondary" onclick="addVal(1);">1</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(2);">2</button></td><td><button type="button" class="btn btn-secondary" onclick="addVal(3);">3</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('*');">*</button></td></tr>
<tr><td colspan="1"></td><td><button type="button" class="btn btn-secondary" onclick="addVal(0);">0</button></td><td><button type="button" class="btn btn-primary" OnClick="addOperation('C');">C</button></td><td><button type="button" class="btn btn-primary" onclick="addOperation('/');">/</button></td></tr>
<tr><td colspan="4"><button type="button" class="btn btn-primary btn-lg btn-block" onclick="calculate();">=</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
<form name="tabela">
<div class="table">
<table class="table table-bordered" id="tabela" data-height="460">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
</form>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>
1640 Riverside Drive, Hill Valley, California
<br />info@mywebsite.com
<br />+ 01 234 567 88
<br />+ 01 234 567 89
</p>
</div>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
<script src="script.js"></script>
<script src="dadostabelas.js"></script>
</body>
</html> ```
【问题讨论】：
-
不清楚你在这里追求什么。您发布了一大段代码，并不清楚预期和实际结果是什么。如果您可以将遇到特定问题的小代码简化为 sn-p，则可能更容易获得帮助。
-
没有“json 表”之类的东西。有一个 HTML 表格，有 JSON 格式的数据。
标签： javascript html css json