Windows XP 平板电脑版中级开发 Visual Studio JavaScript Windows

使用 html 和 javascript 实现动态表格

sathesh pandian

2.92/5 (25投票s)

2007年7月9日

CPOL

2分钟阅读

788607

4941

用户无需使用任何数据库即可添加带有值的行

下载 sample.zip - 882 B

引言

本文档解释了如何有效地使用 HTML 和 JavaScript。可以通过用户输入向 HTML 表格添加内容。它还解释了如何使用 Visual Studio.net 通过 JavaScript 调试 HTML 页面。

设计

在 HTML 文件中，有三个输入框，分别对应用户 ID、用户名和部门。

这些输入框用于获取用户输入。

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

单击按钮后，脚本将启用调试器模式。

在 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 元素中，表格位于内部。

我们可以通过 div.innerHTML 获取它。我们不能更改 OuterHtml。

因此，我们可以创建一个表格并使用创建的表格进行更新。

这个新表格将取代旧表格显示。

我们可以使用这个概念创建一个可编辑的数据网格。

当我们删除一行时，我们需要为每一行设置一个 ID，这对于识别特定行非常有用。

特定的行。

Add

添加新行与本文中的方法相同。

未使用。

要编辑行，您需要获取特定的行并将这些值设置在网格外部的文本框中

或者您可以在那里启用一些输入框进行编辑。

更新

编辑行后，获取行 ID 并用当前行替换之前的行。

删除

要删除行，您可以使用复选框删除行，该复选框可以提供获取特定行 ID 的选项。

特定的行 ID。

本文档将有助于使用 JavaScript 和 HTML 创建动态表格和动态网格。

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>

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