web前端之html+JavaScript实现表格单选与多选、querySelectorAll、getElementById、innerHTML、stringify、push

智码帮MJ682517

已于 2024-07-07 13:59:28 修改

阅读量3.7k

点赞数 6

分类专栏： Html JavaScript Web前端文章标签： html 前端 JavaScript web web前端

于 2021-12-18 09:40:57 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/121998934

版权

Web前端同时被 3 个专栏收录

362 篇文章 5 订阅

订阅专栏

JavaScript

221 篇文章 6 订阅

订阅专栏

Html

84 篇文章 1 订阅

订阅专栏

单选

html

<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>

JavaScript

function clickRadio() {
    document.getElementById('checked').innerHTML = document.querySelector('.radio-table tbody input[type=radio]:checked').value;
}

多选

html

<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>

JavaScript

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);
}