Example of resizable tables




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>JSM Test Page</title> <link rel=stylesheet type="text/css" href="../jsm-documentation.css"> <style> body { margin: 10px 0px 0px 10px; background-color:#ffffff; color: #000000; } </style> <script src="jsm.js" type="text/javascript"></script> <link rel=stylesheet type="text/css" href="css/jsm.css"> <script> //your onSaveRow Event function jsmOnSaveRow(table, rowIdx) { var message="Data: \n"; var tds = table.getTds(rowIdx); for (var tdIdx in tds) { var td = tds[tdIdx]; if (td.getMetaData('actionCell') != 'true') message=message+"Table cell is dirty: " + td.isDirty() + " and has value: " + td.getValue() + " - selectFieldValue: " + td.getMetaData("selectFieldValue") + "\n"; } alert(message); table.getRow(rowIdx).setDirty(false); } </script> </head> <body> <div id="myTableContainer"></div> <br><br><br> <div id="myTableContainer2"></div> <script> myTable = new JsmTable("myTableContainer", "myTable", true); myTable.addColumnName("one", 0).addColumnName("two", 1); myTable.addComparator("two", JsmNumberComparator); myTable.setAttribute('border', 0).setAttribute('cellpadding', 2).setAttribute('cellspacing',2); myTable.setHeaderRow(new JsmTr().addCell(new JsmTh("one").setAttribute("width", "300")).addCell(new JsmTh("two").setAttribute("width", "150"))); myTable.addWidget(0, new JsmTextField()).addWidget(1, new JsmTextField()); myTable.addRow(new JsmTr(1).addCell(new JsmTd("one")).addCell(new JsmTd("1"))); myTable.addRow(new JsmTr(2).addCell(new JsmTd("two")).addCell(new JsmTd("2"))); myTable.addRow(new JsmTr(3).addCell(new JsmTd("three")).addCell(new JsmTd("3"))); myTable.addRow(new JsmTr(4).addCell(new JsmTd("ten")).addCell(new JsmTd("10"))); myTable.addRow(new JsmTr(5).addCell(new JsmTd("eleven")).addCell(new JsmTd("11"))); myTable.addRow(new JsmTr(6, new JsmTd("twelve"), new JsmTd("12"))); myTable.sort("two"); myTable.render(); myTable2 = new JsmTable("myTableContainer2", "myTable2", true).setAttribute("width", "450"); myTable2.addColumnName("one", 0).addColumnName("two", 1); myTable.addComparator("two", JsmNumberComparator); myTable2.setAttribute('border', 0).setAttribute('cellpadding', 2).setAttribute('cellspacing',2); myTable2.setHeaderRow(new JsmTr().addCell(new JsmTh("one").setAttribute("width", "300")).addCell(new JsmTh("two").setAttribute("width", "150"))); myTable2.addWidget(0, new JsmTextField()).addWidget(1, new JsmTextField()); myTable2.addRow(new JsmTr(1).addCell(new JsmTd("one")).addCell(new JsmTd("1"))); myTable2.addRow(new JsmTr(2).addCell(new JsmTd("two")).addCell(new JsmTd("2"))); myTable2.addRow(new JsmTr(3).addCell(new JsmTd("three")).addCell(new JsmTd("3"))); myTable2.addRow(new JsmTr(4).addCell(new JsmTd("ten")).addCell(new JsmTd("10"))); myTable2.addRow(new JsmTr(5).addCell(new JsmTd("eleven")).addCell(new JsmTd("11"))); myTable2.addRow(new JsmTr(6, new JsmTd("twelve"), new JsmTd("12"))); myTable2.sort("two"); myTable2.render(); </script> </body> </html>