Html+JavaScript实现表格(table)单选与多选
Posted web半晨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html+JavaScript实现表格(table)单选与多选相关的知识,希望对你有一定的参考价值。
1、单选
<table class="radio-table" border>
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="select" value="1" onclick="clickRadio()">
</td>
<td>1</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>
<input type="radio" name="select" value="2" onclick="clickRadio()">
</td>
<td>2</td>
<td>李四</td>
<td>21</td>
</tr>
<tr>
<td>
<input type="radio" name="select" value="3" onclick="clickRadio()">
</td>
<td>3</td>
<td>王五</td>
<td>24</td>
</tr>
</tbody>
</table>
<h3>当前选择: <span id="checked"></span></h3>
<script src="./index.js"></script>
function clickRadio()
document.getElementById('checked').innerhtml = document.querySelector('.radio-table tbody input[type=radio]:checked').value;
2、多选
<table class="multi-table" border>
<thead>
<tr>
<th>
<input id="js-all-checkbox" type="checkbox" onclick="checkAll(this)">
</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="select" value="1" oninput="clickCheckbox()">
</td>
<td>1</td>
<td>张三</td>
<td>16</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select" value="2" oninput="clickCheckbox()">
</td>
<td>2</td>
<td>李四</td>
<td>17</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select" value="3" onclick="clickCheckbox()">
</td>
<td>3</td>
<td>王五</td>
<td>19</td>
</tr>
</tbody>
</table>
<h3>当前选中: <span id="js-check-text"></span></h3>
<script src="./index.js"></script>
let checkValues = [];
function clickCheckbox(e)
let checkDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]:checked');
checkValues = [];
for (let i = 0, len = checkDomArr.length; i < len; i++)
checkValues.push(checkDomArr[i].value);
updateText();
let allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]');
let allCheckbox = document.getElementById('js-all-checkbox');
for (let i = 0, len = allCheckDomArr.length; i < len; i++)
if (!allCheckDomArr[i].checked)
if (allCheckbox.checked) allCheckbox.checked = false;
break;
else if (i === len - 1)
document.getElementById('js-all-checkbox').checked = true;
return;
function checkAll(current)
let allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]');
if (!current.checked) // 点击的时候, 状态已经修改, 所以没选中的时候状态时true
checkValues = [];
for (let i = 0, len = allCheckDomArr.length; i < len; i++)
let checkStatus = allCheckDomArr[i].checked;
if (checkStatus) allCheckDomArr[i].checked = false;
else
checkValues = [];
for (let i = 0, len = allCheckDomArr.length; i < len; i++)
let checkStatus = allCheckDomArr[i].checked;
if (!checkStatus) allCheckDomArr[i].checked = true;
checkValues.push(allCheckDomArr[i].value);
updateText();
function updateText()
document.getElementById('js-check-text').innerHTML = JSON.stringify(checkValues);
3、相关链接
以上是关于Html+JavaScript实现表格(table)单选与多选的主要内容,如果未能解决你的问题,请参考以下文章
Javascript更改/迁移/操纵HTML表格(Table)内容案例 (备选表格案例)