js在tr下追加tr_js点击tr后在tr下面加一行tr 再点就隐藏

Ⅰ 怎么利用js添加多行table的tr

原声js中如果你自想创建tr和td 而且是很多个，只能用循环往里面塞值了。

<body>
<tableid="tab"></table>
</body>
<script>
	varoTab=document.getElementById('tab');
	for(vari=0;i<3;i++){
		varoTr=document.createElement('tr');
		for(varj=0;j<3;j++)
		{
			varoTd=document.createElement('td');
			oTr.appendChild(oTd);
		}
		oTab.appendChild(oTr);
	}

</script>
简单的写了一下，仅供参考~~

Ⅱ JS怎样使用appendChild 给table 增加tr td

insertRow（）函数可以带参数，形式如下：这个函数将新行添加到index的那一行前，比如insertRow（0），是将新行添加到第一行之前，默认的insertRow（）函数相当于insertRow（－1），将新行添加到表的最后。

<scriptlanguage="javaScript">

vart＝document．getElementById（＂test＂）；

t.innerHTML="<tr><td>数据</td></tr>";

／／或者

vart＝document．getElementById（＂test＂）；

vartr＝document．createElement（＂tr＂）；

vartd＝doucment．createElement（＂td＂）；

td．innerHTML＝＂数据＂；

tr．appendChild（td）；

t．appendChild（tr）；

｝

</script>

(2)js在tr下追加tr扩展阅读：

给table添加一行

1、＄（＂＃addTable＂）．click（function（）｛；

2、vartr="<tr>"+；

3、"<td>11</td>"+；

4、"<td>22</td>"+；

5、"<td>33</td>"+；

6、"<td>44</td>"+；

7、"<td>55</td>"+；

8、"</tr>";

9、＄（＂．layui－table＂）．append（tr）；

Ⅲ js点击tr后在tr下面加一行tr ，再点就隐藏

<style>
tr:nth-child(odd){
height:70px;
background-color:#0f9
}
tr:nth-child(even){
display:none;
height:60px;
background-color:#c3c
}
</style>
<script>
window.onload=function(){
vartrs=document.getElementsByTagName("tr");
for(vari=0;i<trs.length;i+=2){
(function(i){
trs[i].onclick=function(){
for(varj=0;j<trs.length;j+=2){
if(j==i){
if(trs[j+1].style.display!="table-row"){
trs[j+1].style.display="table-row";
}else{
trs[j+1].style.display="none";
}
}else{
trs[j+1].style.display="none";
}
}
}
})(i);
}
}
</script>
<table>
<tr><td>点击本行</td></tr>
<tr><td>1</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>2</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>3</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>4</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>5</td></tr>
<tr><td>点击本行</td></tr>
<tr><td>6</td></tr>
</table>

Ⅳ jquery动态向指定table中添加<tr>

<!DOCTYPEhtml>
<html>
<head>
		<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
		<scriptclass="jquerylibrary"src="/js/sandbox/jquery/jquery-1.8.2.min.js"type="text/javascript"></script>
		<title>
			RunJS演示代码
		</title>
		<style>
			table{
				border:1pxsolidblack;
				border-collapse:collapse;
			}
			td{
				border:1pxsolidblack;
			}
		</style>
		<script>
			jQuery(function($){
				$("button").click(function(){
					varnum=$("tabletr>td").length;
					$("tabletr").append("<td><inputid='"+(num+1)+"type='text'value='"+(num+1)+"'/></td>");
				});
			});
		</script>
</head>
	<body>
		<button>
			add
		</button>
		<table>
			<tr></tr>
		</table>
</body>
</html>

Ⅳ js 怎么在 <tr>...</tr> 后动态添加 <tr>...</tr>

functiononAddTR(trIndex)
{
vartb=document.getElementById("tb1");
varnewTr=tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置
varnewTd1=newTr.insertCell();
newTd1.innerHTML="这是新行，位置："+trIndex;
varnewTd2=newTr.insertCell();
newTd2.innerHTML="这是新行，位置："+trIndex;
}

请参考采纳，谢谢！

Ⅵ jQuery如何追加tr到table中

jQuery 添加新内容有以下四个方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

下面实例演示：点击按钮则在表格数据区域增加一行

1、HTML结构

<tableid="test">
	<thead>
		<tr><th>列1</th><th>列2</th><th>列3</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>1</td><td>2</td></tr>
		<tr><td>2</td><td>4</td><td>5</td></tr>
	</tbody>		
</table>
<inputtype="button"id="btn1"value="在开头增加">
<inputtype="button"id="btn2"value="在末尾增加">

2、jquery代码

$(function(){
	$("#btn1").click(function(){
		$("#testtbody").prepend('<tr><td></td><td></td><td></td></tr>');
	});
	$("#btn2").click(function(){
		$("#testtbody").append('<tr><td></td><td></td><td></td></tr>');
	});
});

3、效果演示

Ⅶ 如何用js语句插入一个tr到table

function onAddTR(trIndex)
{
var tb = document.getElementById("tb1");
var newTr = tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置
var newTd1 = newTr.insertCell();
newTd1.innerHTML = "这是新行，位置：版" + trIndex;
var newTd2 = newTr.insertCell();
newTd2.innerHTML = "这是新行，位置：" + trIndex;
}
或是直接用jq来写，会更简单权
function onAddTR(trObj)
{
$(trObj).after("<tr onclick='onAddTR(this)'><td>这是新行</td><td></td><tr/>");
}

Ⅷ 用javascript动态在table里增加tr

Ⅸ jquery添加TR

<!DOCTYPEhtml>
<html>
<head>
		<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
		<scriptclass="jquerylibrary"src="/js/sandbox/jquery/jquery-1.8.2.min.js"type="text/javascript"></script>
		<title>
			RunJS演示代码
		</title>
		<script>
			jQuery(function($){
				vartable=$("table");
				varaddbtn=$("button:contains('添加')").click(function(){
					if(table.data("ing")==1){
						alert("必须保存这个TR中输入的值之后，才能再次添加TR，否则不能再次添加");
						return;
					};
					vartxt=$("<tr><td><inputtype='text'/></td></tr>");
					table.append(txt).data("ing",1).prop("txt",txt.find(":text"));
				});
				$("button:contains('保存')").click(function(){
					vartxt=table.prop("txt");
					if(table.data("ing")==0){
						alert("你已经保存过了，不能更改，具体参考提问者需求");
						return;
					}
					if(txt.val()==""){
						alert("填写好数据再保存");
						txt.focus();
						return;
					}else{
						txt.prop("readonly",true);
						table.data("ing",0);
					}
				});
			});
		</script>
</head>
	<body>
		<table>
			
		</table>
		<button>
			添加
		</button>
<button>
			保存
		</button>
</body>
</html>

Ⅹ 如何用js在指定tr后添加tr

你可以用js原生的append或是insertBefore。

下面是简单的例子：

<body>
	<tableid="tab">
	<tr>
	<td>1111</td>
<td>1111</td>
</tr>
</table>
</body>
<script>
	varoTab=document.getElementById('tab');
	varoTr=document.createElement('tr');//创建TR
	oTr.innerHTML='<td>22222</td><td>22222</td>';//TR里面加2个TD
	oTab.appendChild(oTr);
</script>

导航:首页 > 编程语言 > js在tr下追加tr

js在tr下追加tr

与js在tr下追加tr相关的资料

友情链接