JavaScript动态添加文本框

最新推荐文章于 2021-06-03 19:24:13 发布

亚尔诺炽焰

最新推荐文章于 2021-06-03 19:24:13 发布

阅读量5.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/wangjianyu0115/article/details/50800967

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript动态地在HTML表格中添加文本输入框。通过点击"新增"按钮，可以在表格中创建新的行并添加输入框。同时，当用户点击"提交"按钮时，会检查所有文本框是否有空值，只有当所有输入框都有值时，表单才会被提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
	<form id="t">
    	<table id="table">
        <tr></td><input type="text" value="1" /></td></tr>
        <table>
        <input type="button" id="btn" value="提交" />
        <input type="button" id="new" value="新增" />
    </form>
    <script>
    	    document.getElementById('new').onclick = function() {
			    var input = document.createElement('input');
			    var tr = document.createElement('tr');
			    var td = document.createElement('td');
			    td.appendChild(input);
			    tr.appendChild(td);
			    document.getElementById('table').appendChild(tr);	
		    };
		    document.getElementById('btn').onclick = function(){
			    var inps = document.getElementsByTagName('input'),
			    len = inps.length,count = 0,arr = [];
			
			    for(var i = 0; i < len; i++){
				    if(inps[i].type == 'text'){
					    arr.push(inps[i]);
				    }	
			    }
			
			    for(var i = 0; i < arr.length; i++){
				    if(inps[i].value != ''){
					    count++;
				    }else{
					    count--;	
				    }
			    }
			
			    if(count == arr.length){
				    alert('提交')
				    document.getElementById('t').submit();	
			    }else{
				    alert('有空值')	
			    }
		    };
    </script>
    </body>
</html>