HTML示例（一） —— 自动添加单选选项，选中一项并展开对应的表格信息

鸿蕊瑞琳

于 2024-05-24 18:59:06 发布

阅读量526

点赞数 7

分类专栏： HTML 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/u013213069/article/details/139050709

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自动添加单选选项，选中一项并展开对应的表格信息

（一）示例代码
（二）运行效果
（三）appendChild 方法
- 1. 概念：
- 2. .appendChild() 和 .append() 区别：
（四）addEventListener 方法
（五）createElement 方法
- 1. 概念：
- 2. demo：createElement 的使用

（一）示例代码

<!DOCTYPE>
<html>
<head>
	<title> TEST </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="jquery.min.js" language="JavaScript"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var index = 0; 
			var interval;
 
			$('#start').click(function(){
				if (!interval) {
					interval = setInterval(function(){
					
					$('#myList').append('<input type=\"radio\" id=\"option'+index+'\" name="group1" value="option1">列表项' + index);
					var formid = document.getElementById('option'+index);
					document.getElementById('myList').appendChild(formid);
					document.getElementById('myList').appendChild(document.createElement('br'));
					
					$('#myList').append('<table id=\"table'+index+'\" style=\"display:none;\"><tr><th style = "width:100px;">Header 1</th>' + 
						'<td style = "width:160px;">Data 1</td></tr><tr><th style = "width:100px;">Header 2</th><td style = "width:160px;">Data 2</td></tr></table>');
					var tableid = document.getElementById('table'+index);
					document.getElementById('myList').appendChild(tableid);
					<!-- document.getElementById('myList').appendChild(document.createElement('br')); -->
					document.getElementById('option' + index).addEventListener('click', function(event) {
						var radios = document.getElementsByName('group1');
						alert('radios.length = ' + radios.length);
						
						
						for (var i = 0; i < radios.length; i++) {
							if (radios[i].checked) { 
								alert('i = ' + i);
								document.getElementById('table'+i).style.display = "block";
								break; 
							} else {
								document.getElementById('table'+i).style.display = "none";
							}
						}
					});
					index++;
					}, 2000); // 每2000毫秒（2秒）添加一个新的列表项
				}
			});
 
			$('#stop').click(function(){
				if (interval) {
					clearInterval(interval);
					interval = null;
				}
			});
			
		});
	</script>
	<style>
		table {
			display:none;
			width: 100%;
			border-collapse: collapse;
		}
		th, td {
			border: 1px solid black;
			padding: 8px;
			text-align: left;
		}
	</style>
</head>

<body>
<button id="start">开始自动添加</button>
<button id="stop">停止</button>
<form id="myList">
</form>
</body>
</html>

（二）运行效果

在这里插入图片描述

（三）appendChild 方法

1. 概念：

是JavaScript 中 DOM（文档对象模型）操作的一个方法，用于将一个节点添加到另一个节点的子节点列表的末尾。这个方法属于 Node 类型，因此所有的 DOM 节点都拥有这个方法。addEventListener 是处理 DOM 事件的关键方法，它提供了灵活且强大的事件处理机制。

2. .appendChild() 和 .append() 区别：

（1）参数处理：.appendChild() 方法只能接受一个参数，即要添加的节点；
.append() 方法可以同时接受多个参数，可以是节点或字符串，并且它不会返回任何值。
（2）返回值：.appendChild() 方法返回添加的子节点；.append() 方法没有返回值。
（3）浏览器兼容性：.appendChild() 是一个较旧的方法，它在所有主流浏览器中都得到了广泛的支持；
.append() 是一个相对较新的方法，可能在某些旧版浏览器中存在兼容性问题234。然而，根据最新信息，它在主流浏览器中如 Firefox、Chrome 和 IE 都得到了支持。

注意：但在上述示例中实际操作时，append 方法后执行click事件不生效，使用appendChild 方法后生效（后续使用时需要再理解理解）

（四）addEventListener 方法

1. 概念：

是 JavaScript 中用于为指定元素添加事件监听器的方法。当指定的事件（如点击、滚动、键盘输入等）在元素上发生时，会触发事件监听器并执行关联的回调函数。

2. 语法：

target.addEventListener(type, listener[, options]);
参数说明：
（1）target 是一个 DOM 元素，代表要添加事件监听器的对象。
（2）type 是一个字符串，表示事件的名称（如 "click"、"mousedown"、"keydown" 等）。
（3）listener 是一个实现了 EventListener 接口的对象，或者是一个简单的回调函数，当事件发生时会被调用。
（4）options 是一个可选参数，一个指定有关监听器属性的对象。例如，你可以设置 capture、once 和 passive 等属性。

3. demo：使用 addEventListener 来为按钮添加点击事件的监听器

// 获取按钮元素
var button = document.getElementById('myButton');

// 定义事件处理函数
function handleClick(event) {
  alert('按钮被点击了！');
}

// 添加事件监听器
button.addEventListener('click', handleClick);

4. 移除事件监听器

// 移除之前添加的事件监听器
button.removeEventListener('click', handleClick);
注意：
	为了正确移除监听器，你提供的监听器函数（在本例中是 handleClick）必须是同一个引用。如果你每次调用addEventListener 
时都创建一个新的匿名函数，你将无法移除这些监听器，因为 removeEventListener 需要确切的引用才能找到并移除对应的监听器。

（五）createElement 方法

1. 概念：

是 JavaScript 中 Document 对象的一个方法，用于创建一个新的元素节点。这个方法接受一个参数，即你想要创建的元素的标签名（比如 ‘div’、‘span’、‘a’ 等），并返回一个新的 Element 对象，表示该元素。新创建的元素节点最初是“空的”，不包含任何属性、子节点或文本。

2. demo：createElement 的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Radio Buttons</title>
</head>
<body>

<div id="radio-container">
    <!-- 动态单选按钮将在这里被添加 -->
</div>

<script>
// 假设这是您添加单选按钮的函数
function createRadioButton(value, text) {
    var radioButton = document.createElement('input');
    radioButton.type = 'radio';
    radioButton.name = 'myRadioGroup';
    radioButton.value = value;
    radioButton.id = 'radio-' + value;

    var label = document.createElement('label');
    label.htmlFor = 'radio-' + value;
    label.textContent = text;

    label.appendChild(radioButton);
    document.getElementById('radio-container').appendChild(label);
	document.getElementById('radio-container').appendChild(document.createElement('br'));
}

// 使用事件委托处理所有单选按钮的click事件
document.getElementById('radio-container').addEventListener('click', function(event) {
    var target = event.target;
    if (target.tagName.toLowerCase() === 'input' && target.type === 'radio') {
        console.log('Radio button clicked:', target.value);
        // 在这里执行您需要的逻辑
    }
});

// 动态创建并追加单选按钮
createRadioButton('option1', 'Option 1');
createRadioButton('option2', 'Option 2');

</script>

</body>
</html>