Frontend - DOM 元素操作（Select、CheckBox、Radio、Table）
目录
一、Select 下拉框
（一）下拉选项，初始化赋值（Django 模板语）
（二） 获取下拉框已有值、某个下拉选项的值
1. 获取已赋值的下拉框的值
2. 获取某个下拉选项的值
（三）清除下拉框已有值、清空所有下拉选项
1. 清除下拉框已有值
2. 清空所有下拉选项
（四）更新下拉框已选值、更新所有下拉选项值
1. 重新赋予所有下拉选项值
2. 联动更新下拉框所选值（通过自定义给值，而非change事件）
二、CheckBox 复选框
（一）全选/多选、取消全选
（二）全选/多选、取消全选、事件清空 CheckBox
（三）切换 All CheckBox 状态（4种方法）
（四）JS 添加某个 CheckBox（而不是在HTML中添加）
（五）点击任意位置，触发其所在的 CheckBox
（六）操作单个 CheckBox
（七）获取勾选的值
1. 不包含 CheckBox 值
2. 包含 CheckBox 值
三、Radio 单选框
（一）单选（input 的 name 名需一致）
（二）清空单选
（三）获取选中的行值
1. 不包含 radio 值
2. 包含 radio 值
四、Table 表格
（一）table tr 行数据的获取
1. 获取某行的某个单元格值
2. 获取所有行值（二维列表）
3. 获取有 select 格式的所有行值（二维列表）
4. 获取CheckBox勾选中行值（二维列表）
5. 获取Radio勾选中的行值（二维列表）
（二）添加某行
（三）清除整个table、某行
1. 删除某行
2. 删除所有行（清除整个table）
一、Select 下拉框
（一）下拉选项，初始化赋值（Django 模板语）
（二） 获取下拉框已有值、某个下拉选项的值
1. 获取已赋值的下拉框的值
$('#id_select').val();2. 获取某个下拉选项的值
$('#id_select').children().eq(0); // 获取第一个下拉选项（三）清除下拉框已有值、清空所有下拉选项
1. 清除下拉框已有值
$("#id_sel option:selected").prop("selected", false); // 最好用prop，而不是attr
2. 清空所有下拉选项
$('#id_sel').empty();（四）更新下拉框已选值、更新所有下拉选项值
1. 重新赋予所有下拉选项值
let book_sel = '#id_book_sel'; // 下拉框的ID
let coloropt = ['请选择', 'blue', 'pink', 'red'] // 新的下拉选项
let clearopt = true; // 是否清空之前的所有下拉选项
// 第一种：
function init_sel(coloropt, book_sel, clearopt) {
if (clearopt) {
$(coloropt).empty();
}
let default_opt = ''
$(book_sel).append(default_opt)
for (let idx in range(1, coloropt.length)) {
let bookopt = '';
$(book_sel).append(bookopt)
}
}
// 第二种：设置默认选项，也可以用js实现
function init_sel(coloropt, book_sel, clearopt) {
if (clearopt) {
$(coloropt).empty();
}
for (let idx in coloropt) {
let bookopt = '';
$(book_sel).append(bookopt)
}
$(book_sel).children().eq(0).prop('selected', true);
}2. 联动更新下拉框所选值（通过自定义给值，而非change事件）
let newval = 'newbook'
let sel = '#id_select'
function change_selected_opt(newval, sel) { // 不是通过下拉框的change事件，通过自定义给值
$(sel+" option:selected").prop("selected", false);
$(sel+" option[value=" + newval + "]").prop("selected", true);
}二、CheckBox 复选框
（一）全选/多选、取消全选
th1
th2
th3
th4
th5
// Script代码
（二）全选/多选、取消全选、事件清空 CheckBox
th1
th2
th3
th4
th5
// Script代码
（三）切换 All CheckBox 状态（4种方法）
// 切换复选框状态（checkall是boolean值）
// 第一种
let id_all_checkbox = "#id_tb_tbody tr > td:nth-child(1) > input[type='checkbox']";
$(id_all_checkbox).prop('checked', checkall);
// 第二种
$('#id_tb_tbody tr').each(function () {
$(this).find('input[type="checkbox"]').prop('checked', checkall); //取消复选框
})
// 第三种
$("#id_tb_tbody").find('input[type="checkbox"]').each(function () { // 执行全选or取消全选
this.checked = checkall;
});
// 第四种
let allbox = document.querySelector("#id_tb_tbody").querySelectorAll('input[type="checkbox"]'); // 或者.querySelectorAll('input: checkbox')
for (let i=0;i（四）JS 添加某个 CheckBox（而不是在HTML中添加）
// 2. 在js代码：var tb_dt = $('#id_tb').DataTable(set_checkbox_tb);处后面补充如下逻辑
$('#id_tb_thead > tr > th:nth-child(1)').html(''); // 给id_tb表格的thead标题新增一个CheckBox，自命名ID为id_checkall（五）点击任意位置，触发其所在的 CheckBox
// 单击表格某行，改变当行的 CheckBox 状态
$('table tbody tr').click(function() {
$(this).find('input[type=checkbox]').click();
});（六）操作单个 CheckBox
// 单个复选框选中or取消（checkall是boolean值）
// 第一种
$('#id_checkall').prop("checked", checkall);
// 第二种
document.querySelector('#id_checkall').checked = false;
（七）获取勾选的值
1. 不包含 CheckBox 值
$("#id_btn").on("click", function () { // 获取选中的行值（排除 CheckBox 复选框值）
let all_tr_list = [];
$("#id_tb_tbody").find('input[type=checkbox]').each(function () {
let tr_data = [];
if ($(this).is(':checked')) {
$(this).parent().prevAll().each(function () { // prevAll() 返回被选元素之前的所有同级元素
tr_data.push($(this).html());
})
$(this).parent().nextAll().each(function () { // nextAll() 返回被选元素之后的所有同级元素
tr_data.push($(this).html());
})
all_tr_list.push(tr_data);
}
})
console.log('选中的行值：', all_tr_list)
});2. 包含 CheckBox 值
$("#id_btn").on("click", function () { // 获取选中的行值（包括 checkbox 复选框值）
let all_tr_list = [];
$("#id_tb_tbody tr").each(function () {
if ($(this).find('input[type=checkbox]').is(':checked')) {
all_tr_list.push(tb_dt.row($(this)).data());
}
})
console.log('选中的值：', all_tr_list);
});三、Radio 单选框
（一）单选（input 的 name 名需一致）
相同name的radio为一组。
th1
th2
th3
th4
th5
// Script代码
（二）清空单选
$("#id_btn").on("click", function () { // id_btn 是按钮的 ID
$("#id_tb_tbody tr").find('input[type="radio"]').prop("checked", false);
});
（三）获取选中的行值
1. 不包含 radio 值
$("#id_btn").on("click", function () { // 获取选中的行值（排除 radio 单选值）
let all_tr_list = [];
$("#id_tb_tbody").find('input[type=radio]').each(function () {
let tr_data = [];
if ($(this).is(':checked')) {
$(this).parent().prevAll().each(function () { // prevAll() 返回被选元素之前的所有同级元素
tr_data.push($(this).html());
})
$(this).parent().nextAll().each(function () { // nextAll() 返回被选元素之后的所有同级元素
tr_data.push($(this).html());
})
all_tr_list.push(tr_data);
}
})
console.log('选中的行值：', all_tr_list)
});
2. 包含 radio 值
$("#id_btn").on("click", function () { // 获取选中的行值（包括 radio 单选值）
let all_tr_list = [];
$("#id_tb_tbody tr").each(function () {
if ($(this).find('input[type=radio]').is(':checked')) {
all_tr_list.push(tb_dt.row($(this)).data());
}
})
console.log('选中的值：', all_tr_list);
});
四、Table 表格
（一）table tr 行数据的获取
1. 获取某行的某个单元格值
// 获取表格tbody中, 被双击的该行的第一个单元格值
// 第一种
$("#id_tb_tbody").on("dblclick", "tr", function () {
let td1 = $(this).find("td").eq(1).html(); // 下标从0开始
});
// 第二种
$("#id_tb_tbody").on("dblclick", "tr", function () {
let td1 = $(this).find("td:nth-child(1)").html(); // 下标从1开始
});
// 第三种
$("#id_tb_tbody").on("dblclick", "tr", function () {
let td1 = $(this).children(':first').text();
});
2. 获取所有行值（二维列表）
let tb_data = get_alltr('#id_tb_tbody');
function get_alltr(tb_tbody) {
let alltr_list = []; // 所有行（二维列表）
$(tb_tbody).find('tr').each(function () {
let tr_list = []; // 单行（一维列表）
$(this).find('td').each(function () {
if ($(this).find("input").length == 1) { // 如果td内容是input类型（比如number、text）
tr_list.push($(this).find('input').val());
} else {
tr_list.push($(this).html());
}
})
if (tr_list.length > 0) {
alltr_list.push(tr_list)
}
})
return alltr_list
}
3. 获取有 select 格式的所有行值（二维列表）
有判定整个表格是否为空；下拉框是否选值
// tbody_id是表格body的ID(如：#id_tboby)、dt是DataTable、sel_idx_list是每行的下拉框格式单元格的下标位置集合
function get_rows_data(tbody, dt, sel_idx_list) {
let table_list = []; // 表格的内容
if ($(tbody + ' tr:nth-child(1) > td:nth-child(1)').html() != 'No data available in table') { // table不为空
$(tbody + ' tr').each(function () {
let tr_list = [...dt.row($(this)).data()]; // 获取当前整行
for (let i = 0; i < sel_idx_list.length; i++) { // 循环下拉框格式的下标
let sel_val = $(this).find("td").eq(sel_idx_list[i]).find('select').val(); // 获取当前行的下拉框格式单元格的值
if (sel_val == '请选择') { // 代表下拉框没有选值
table_list = []; // 清空当前表格的内容
return false; // 直接跳出each循环，不仅仅是跳出for循环
} else {
tr_list[sel_idx_list[i]] = sel_val;
}
}
table_list.push(tr_list);
})
console.log('针对上面直接跳出each循环后，下一步就会走该处')
}
return table_list;
}
4. 获取CheckBox勾选中行值（二维列表）
在第二节中有讲到。
5. 获取Radio勾选中的行值（二维列表）
在第三节中有讲到。
（二）添加某行
$("#id_btn").click(function () {
tb_dt.row.add(['', 11, 12, 13, 14, 15]).draw();
})
（三）清除整个table、某行
1. 删除某行
$('#id_tb_tbody').on("dblclick", "tr", function () { // 双击某行，删除改行
if (confirm('Delete?')) {
tb_dt.row($(this)).remove().draw();
}
})
2. 删除所有行（清除整个table）
$("#id_btn").click(function () {
tb_dt.clear().draw();
})