150 lines
3.6 KiB
HTML
150 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ja">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<script src="js/auth.js"></script>
|
||
<title>試算表</title>
|
||
<style>
|
||
body {
|
||
font-family: 'MS Gothic', 'Meiryo', sans-serif;
|
||
margin: 24px auto;
|
||
font-size: 15px;
|
||
max-width: 1400px;
|
||
}
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
font-size: 20px;
|
||
}
|
||
.search-form {
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
background: #f5f5f5;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.search-form label {
|
||
margin-right: 5px;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
.search-form input {
|
||
margin-right: 15px;
|
||
padding: 5px 10px;
|
||
border: 1px solid #999;
|
||
border-radius: 3px;
|
||
font-size: 14px;
|
||
}
|
||
.search-form button {
|
||
padding: 6px 20px;
|
||
margin: 0 5px;
|
||
background: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.search-form button:hover {
|
||
background: #45a049;
|
||
}
|
||
.search-form button.secondary {
|
||
background: #2196F3;
|
||
}
|
||
.search-form button.secondary:hover {
|
||
background: #0b7dda;
|
||
}
|
||
.period-info {
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
th,
|
||
td {
|
||
border: 1px solid #999;
|
||
padding: 8px 10px;
|
||
text-align: right;
|
||
}
|
||
th {
|
||
background: #e8e8e8;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
td.left {
|
||
text-align: left;
|
||
}
|
||
td.right {
|
||
text-align: right;
|
||
}
|
||
tr.total-row td {
|
||
background-color: #d8d8d8 !important;
|
||
font-weight: bold;
|
||
border-top: 2px solid #666;
|
||
}
|
||
tfoot td {
|
||
font-weight: bold;
|
||
background: #e0e0e0;
|
||
border-top: 2px solid #333;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h2>残高試算表（貸借・損益）</h2>
|
||
|
||
<div class="search-form">
|
||
<label for="dateFrom">開始年月日:</label>
|
||
<input type="date" id="dateFrom" min="1900-01-01" max="2099-12-31" />
|
||
|
||
<label for="dateTo">終了年月日:</label>
|
||
<input type="date" id="dateTo" min="1900-01-01" max="2099-12-31" />
|
||
|
||
<button id="btnSearch">検索</button>
|
||
<button id="btnFullYear" class="secondary">全年度表示</button>
|
||
</div>
|
||
|
||
<div class="period-info">
|
||
<span id="periodInfo">令和7年 1月 1日 ～ 令和7年 12月31日</span>
|
||
<span style="margin-left: 20px;">単位: 円</span>
|
||
</div>
|
||
|
||
<table id="trialBalanceTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="left">科目コード</th>
|
||
<th class="left">科目名称</th>
|
||
<th>期首残高</th>
|
||
<th>借方発生額</th>
|
||
<th>貸方発生額</th>
|
||
<th>期末残高</th>
|
||
<th>構成比(%)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- JS 动态插入 -->
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colspan="2" class="left">合計</td>
|
||
<td id="totalOpening">0</td>
|
||
<td id="totalDebit">0</td>
|
||
<td id="totalCredit">0</td>
|
||
<td id="totalClosing">0</td>
|
||
<td id="totalRatio">100.00</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
|
||
<script src="js/trial-balance.js"></script>
|
||
</body>
|
||
</html>
|
||
</script>
|
||
</body>
|
||
</html>
|