使用html和javascript的动态 table

分享于 

7分钟阅读

Web开发

  繁體 雙語

介绍

本文将介绍如何有效地使用html和 javascript。 可以通过用户输入添加 html table的内容。 它还解释了如何使用可视 studio.net 调试带有javascript的html页面

设计

在html文件中,有三个输入框,分别有 userid。username。department。

这些inputboxes用于从用户那里获取输入。

用户可以向页面添加任意数量的输入。

当单击按钮时,脚本将启用调试器模式。

在javascript中,为了启用调试器模式,我们必须在javascript中添加以下标记。





debugger;



然后,你必须在 IE 中设置调试。


Tools->Internet Options-->Advanced-->uncheck


Disable script debugging(Internet Explorer)


Disable script debugging(Other)



<html xmlns="http://www.w3.org/1999/xhtml" >



<head runat="server">



<title>Dynamic Table</title>



<script language="javascript" type="text/javascript">



// <!CDATA[



function CmdAdd_onclick() {



var newTable,startTag,endTag;



//Creating a new table



startTag="<TABLE id='mainTable'><TBODY><TR><TD style="WIDTH: 120px">User ID</TD>


<TD style="WIDTH: 120px">User Name</TD><TD style="WIDTH: 120px">Department</TD></TR>"



endTag="</TBODY></TABLE>"



newTable=startTag;



var trContents;



//Get the row contents



trContents=document.body.getElementsByTagName('TR');



if(trContents.length>1)



{



for(i=1;i<trContents.length;i++)



{



if(trContents(i).innerHTML)



{



// Add previous rows



newTable+="<TR>";



newTable+=trContents(i).innerHTML;



newTable+="</TR>";



} 



}



}



//Add the Latest row



newTable+="<TR><TD style="WIDTH: 120px">" +


 document.getElementById('userid').value +"</TD>";



newTable+="<TD style="WIDTH: 120px">" +


 document.getElementById('username').value +"</TD>";



newTable+="<TD style="WIDTH: 120px">" +


 document.getElementById('department').value +"</TD><TR>";



newTable+=endTag;



//Update the Previous Table With New Table.



document.getElementById('tableDiv').innerHTML=newTable;



}



// ]]>



</script>



</head>



<body>



<form id="form1" runat="server">



<div>



<br />



<label>UserID</label> 



<input id="userid" type="text" /><br />



<label>UserName</label> 



<input id="username" type="text" /><br />



<label>Department</label> 



<input id="department" type="text" />



<center>



<input id="CmdAdd" type="button" value="Add" onclick="return CmdAdd_onclick()" />


</center>



</div>



<div id="tableDiv" style="text-align:center" >



<table id="mainTable">



<tr style="width:120px" >



<td >User ID</td>



<td>User Name</td>



<td>Department</td>



</tr>



</table>



</div>



</form>



</body>



</html>



在 上面 代码中,我们将div元素分配给 tableDiv。

在这个div元素中,table 是 inside。

我们可以通过 div.innerHTML。 我们不能改变 OuterHtml。

所以我们可以创建一个 table,并且可以用创建的table 进行更新。

新的table 将显示,而不是旧的table。

我们可以使用这个概念来创建一个可以编辑的Datagrid。

我们必须在 delete 行中设置每行的id,这对idetify非常有用

特定行。

在本文中添加新行类似于。

编辑:

为了编辑行,必须获取特定行并在文本框中设置值

在网格之外,你可以启用一些输入框来编辑它。

更新:

编辑行之后,获取行id并将前一行替换为当前行。

Delete:

删除行,你可以使用复选框来删除行,该复选框可以提供选择

特定行 id。

本文将帮助你使用javascript创建动态 table 和动态网格。

html。


I have used DOM for the same purpose. The code is given below.


Javascript:


function addRowToTable()


{


 var tbl = document.getElementById('tblSample');


 var lastRow = tbl.rows.length;


//if there's no header row in the table, then iteration = lastRow + 1


 var iteration = lastRow;


 var row = tbl.insertRow(lastRow);



//left cell


 var cellLeft = row.insertCell(0);


 var textNode = document.createTextNode(iteration);


 cellLeft.appendChild(textNode);



//right cell


 var cellRight = row.insertCell(1);


 var el = document.createElement('input');


 el.type = 'text';


 el.name = 'txtRow' + iteration;


 el.id = 'txtRow' + iteration;


 el.size = 40;


 cellRight.appendChild(el); 


 }



function removeRowFromTable()


{


 var tbl = document.getElementById('tblSample');


 var lastRow = tbl.rows.length;


 if (lastRow> 2) tbl.deleteRow(lastRow - 1);


}


HTML



<form action="sample.html">



<p>



<input type="button" value="Add" onclick="addRowToTable();" />



<input type="button" value="Remove" onclick="removeRowFromTable();" />



<input type="button" value="Submit" onclick="validateRow(this.form);" />



<input type="checkbox" id="chkValidate" /> Validate Submit



</p>



<p>



<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress



<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>



</p>



<table border="1" id="tblSample">



<tr>



<th colspan="3">Sample table</th>



</tr>



<tr>



<td>1</td>



<td><input type="text" name="txtRow1"







id="txtRow1" size="40" /></td>



</tr>



</table>



</form>



如果有人对本文有疑问,请随时给我留言。


JAVA  Javascript  tab    动态  
相关文章