利用javascript,做一个动态表格

发布网友发布时间：2022-04-28 20:07

共2个回答

懂视网时间：2022-05-16 07:17

本文分享一个用js 写一个可变的表格的代码，希望对大家有帮助！

table.html

<html>
<head>
 <title>js table</title>
 <meta charset="utf-8">
<script src="js.js"></script>
</head>
<body>
 <button onclick="jianbiao()">创建表格</button>
 <button onclick="jianhang()">添加行</button>
</body>
</html>

js.js

/**************************************
任务：
 1.创建Table，并将Table添加到Body当中
 2.向Table中添加行TableRow
 3.向TableRow中添加单元格TableCell
 4.在TableCell中，添加innerHTML的内容，比如数字，文本，编辑框，按钮等
 5.从table中删除一行
 6.可视化编辑TableRow中的内容

***************************************/
 function jianbiao() {
// body...
var mytable=document.createElement('table');
mytable.border='1';
mytable.id='mytable';
document.body.appendChild(mytable);
var row=mytable.insertRow(0);
var cell1=row.insertCell(0);
cell1.innerHTML="描述1";
var cell2=row.insertCell(1);
cell2.innerHTML="描述1";
var cell3=row.insertCell(2);
cell3.innerHTML="描述1";
var cell4=row.insertCell(3);
cell4.innerHTML="描述1";
}
function jianhang(){
var mytable=document.getElementById('mytable');
var rowCount=mytable.rows.length;
var row=mytable.insertRow(rowCount);
var cell1=row.insertCell(0);
cell1.innerHTML="这个单元格的坐标是(0,"+ rowCount +")";
var cell2=row.insertCell(1);
cell2.innerHTML="(1,"+ rowCount +")";
var cell3=row.insertCell(2);
cell3.innerHTML="<input type='text' />";
var cell4=row.insertCell(3);
cell4.innerHTML="<button onclick='gengxin(this.parentNode.parentNode.rowIndex)'/>修改</button><button onclick='delet(this.parentNode.parentNode.rowIndex)'>删除</button>";
}
function gengxin (argument) {
var mytable=document.getElementById('mytable');
var row=mytable.rows[argument];
var cell=row.cells[1];
cell.innerHTML="修改之后";
}
function delet (argument) {
 var mytable=document.getElementById('mytable');
 mytable.deleteRow(argument);
}

热心网友时间：2022-05-16 04:25

添加行和列的我做过，改变行列高宽的我没有做，但是你的要求是可行的，是能够做的，只是我一般会避免做这样的代码，太麻烦了，简直是折磨人。

用什么做才不累呢，我推荐用EXCEL来做：在EXCEL里面做好基本表样以后，选择保存为网页，里面的代码可以拷贝到你的网页上运行，比如下面的代码可以存为一个html文件，你用浏览器打开试试看效果：


<OBJECT id=Book1_538_Spreadsheet classid=CLSID:0002E559-0000-0000-C000-000000000046><PARAM NAME="DataType" VALUE="XMLDATA"><PARAM NAME="XMLData" VALUE='<?xml version="1.0"?> <?mso-application progid="Excel.Sheet"?><ss:Workbook xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:c="urn:schemas-microsoft-com:office:component:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40"> <x:ExcelWorkbook> <x:ProtectStructure>False</x:ProtectStructure> <x:ActiveSheet>0</x:ActiveSheet> </x:ExcelWorkbook> <ss:Styles> <ss:Style ss:ID="Default"> <ss:Alignment ss:Horizontal="Automatic" ss:Rotate="0.0" ss:Vertical="Center" ss:ReadingOrder="Context"/> <ss:Borders> </ss:Borders> <ss:Font ss:FontName="宋体" ss:Size="12" ss:Color="Automatic" ss:Bold="0" ss:Italic="0" ss:Underline="None"/> <ss:Interior ss:Color="Automatic" ss:Pattern="None"/> <ss:NumberFormat ss:Format="General"/> <ss:Protection ss:Protected="1"/> </ss:Style> </ss:Styles> <c:ComponentOptions> <c:Label> <c:Caption>Microsoft Office 电子表格</c:Caption> </c:Label> <c:SpreadsheetAutoFit/> <c:MaxHeight>80%</c:MaxHeight> <c:MaxWidth>80%</c:MaxWidth> <c:NextSheetNumber>1</c:NextSheetNumber> </c:ComponentOptions> <x:WorkbookOptions> <c:OWCVersion>11.0.0.6555 </c:OWCVersion> <x:Height>7620</x:Height> <x:Width>15240</x:Width> </x:WorkbookOptions> <ss:Worksheet ss:Name="Sheet1"> <x:WorksheetOptions> <x:Selected/> <x:ViewableRange>R1:R262144</x:ViewableRange> <x:Selection>R1C1</x:Selection> <x:TopRowVisible>0</x:TopRowVisible> <x:LeftColumnVisible>0</x:LeftColumnVisible> <x:ProtectContents>False</x:ProtectContents> <x:Unsynced/> </x:WorksheetOptions> <c:WorksheetOptions> </c:WorksheetOptions> <ss:Table ss:DefaultColumnWidth="54.0" ss:DefaultRowHeight="14.25"> </ss:Table> <x:PublishObjects> <x:PublishObject> <x:Id>538</x:Id> <x:DivID>Book1_538</x:DivID> <x:SourceType>SourceSheet</x:SourceType> <x:HtmlType>HtmlCalc</x:HtmlType> <x:Location x:HRef="D:	emp文件Book1.htm"/> </x:PublishObject> </x:PublishObjects> </ss:Worksheet> <o:DocumentProperties> <o:Author>桥</o:Author> <o:Created>2007-08-20T09:12:19Z</o:Created> <o:Company>chinalife</o:Company> <o:Version>11.6568</o:Version> </o:DocumentProperties> </ss:Workbook> '><PARAM NAME="AllowPropertyToolbox" VALUE="-1"><PARAM NAME="AutoFit" VALUE="-1"><PARAM NAME="Calculation" VALUE="-4105"><PARAM NAME="Caption" VALUE="Microsoft Office 电子表格"><PARAM NAME="DisplayColumnHeadings" VALUE="-1"><PARAM NAME="DisplayGridlines" VALUE="-1"><PARAM NAME="DisplayHorizontalScrollBar" VALUE="-1"><PARAM NAME="DisplayOfficeLogo" VALUE="-1"><PARAM NAME="DisplayPropertyToolbox" VALUE="0"><PARAM NAME="DisplayRowHeadings" VALUE="-1"><PARAM NAME="DisplayTitleBar" VALUE="0"><PARAM NAME="DisplayToolbar" VALUE="-1"><PARAM NAME="DisplayVerticalScrollBar" VALUE="-1"><PARAM NAME="DisplayWorkbookTabs" VALUE="-1"><PARAM NAME="EnableEvents" VALUE="-1"><PARAM NAME="MaxHeight" VALUE="80%"><PARAM NAME="MaxWidth" VALUE="80%"><PARAM NAME="MoveAfterReturn" VALUE="-1"><PARAM NAME="MoveAfterReturnDirection" VALUE="-4121"><PARAM NAME="RightToLeft" VALUE="0"><PARAM NAME="ScreenUpdating" VALUE="-1"><PARAM NAME="LockedDown" VALUE="0"><PARAM NAME="ConnectedToChart" VALUE="0"><PARAM NAME="DefaultQueryOnLoad" VALUE="-1"><PARAM NAME="EnableUndo" VALUE="-1">
要交互式地使用此网页，您必须有 Microsoft® Internet Explorer 5.01 Service Pack 1 (SP2) 或更新版本，以及 Microsoft Office 2003 Web Components。请访问 <a href="http://r.office.microsoft.com/r/rlidmsowcpub?clid=2052&p1=Excel">Microsoft Office 网站</a> 以获取更多信息。</OBJECT>