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相關的資料

友情鏈接