JavaScript HTML table tr 的增删改查

最新推荐文章于 2024-07-21 17:12:59 发布

原创最新推荐文章于 2024-07-21 17:12:59 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #table #tr

本文介绍如何使用JavaScript和jQuery操作HTML表格，包括获取表格长度、增加、删除及修改表格内容的方法。

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

一、获取表格的长度：

1.获得表格里面所有的tr数量: document.getElementById("id").rows.length

2.获得表格thead里的tr数量: $("#id>thead").children("tr").length

3.获得表格tbody里tr数量: $("#id>tbody").children("tr").length

二、增加<tr></tr>

var str = '<tr><td></td><td></td><td></td></tr>';
$("#id").append(str);

三、删除<tr></tr>

$('#id').remove(); // 删除当前

删除上一级 $('#id').parent().remove();

删除上上一级 $('#id').parent().parent().remove();

四、修改

var text = $('#groupsAdd>tbody').find("tr td");
var j = 1;
for(var i = 0; i< text.length; i+=3){
     text[i].innerText = (j++)+'.';
}

例子：

var groupData = [];  // 记录选择的组别id
	    $('#group_select').change(function(){
		var groupId = $(this).val();
		if(groupId!="" && groupData.indexOf(groupId) == -1){ 
			groupData[groupData.length] = groupId;
			var len = $("#groupsAdd>tbody").children("tr").length+1;
			var text = $(this).find("option:selected")[0].text;
			var str = '<tr id = "'+groupId+'"><td>'+len+'.</td><td>'+text+
				' </td><td><a onclick="removeTr(this,'+groupId+')">删除</a></td></tr>';
			$("#groupsAdd").append(str);
		}
	})
	
	function removeTr(_this, groupId){
		var index = groupData.indexOf(groupId+'');
		if(index!=-1){
			groupData.splice(index,1)
			$(_this).parent().parent().remove();  // 删除上上级
            // $('#'+groupId).remove();  删除自己
		}
		var text = $('#groupsAdd>tbody').find("tr td");
		var j = 1;
		for(var i = 0; i< text.length; i+=3){
			text[i].innerText = (j++)+'.';
		}
        
	}