JavaScript:ListView示例

<title>列表</title>
<style>
<!--
body     { font-size: 10px }
table    { font-size: 12px }
-->
</style>
<script language = 'javascript'>
function InitList(theList, theTable, iEnd, iId, checkIt)
{
var colWidth = (document.body.clientWidth - 200) / iEnd

with(theList)
{
View = 3
BorderStyle = 0
GridLines = true
Checkboxes = checkIt
FullRowSelect = true
LabelEdit = 1

for(var i = 0; i < iEnd; i ++)
{
ColumnHeaders.Add(i + 1, 'Col' + i, theTable.rows[0].cells[i].innerText, colWidth) //, 100, myAlign)
}
for(var i = 1; i < theTable.rows.length; i ++)
{
myList.ListItems.Add( i, 'Key' + theTable.rows[i].cells[iId -1].innerText.replace(" ", ""), theTable.rows[i].cells[0].innerText.replace(" ", ""))
for(var j = 1; j < iEnd; j ++)
{
  ListItems(i).SubItems(j) = theTable.rows[i].cells[j].innerText.replace(" ", "")
}
}
Sorted = true
}
}
</script>
<script language = 'javascript' for = 'myList' event = 'ColumnClick(ColumnHeader)'>

if(ColumnHeader.SubItemIndex == myList.SortKey)
{
    if(myList.SortOrder == 0) myList.SortOrder = 1
    else myList.SortOrder = 0
    }
else
{
    myList.SortKey = ColumnHeader.SubItemIndex
    if(myList.SortOrder == 0) myList.SortOrder = 1
else myList.SortOrder == 0
    }
</script>
<script language = 'javascript' for = 'myList' event = 'ItemClick(Item)'>
var theValue = ""
 
   theValue = Item.Text + Item.Key
   for(i = 1; i <= Item.ListSubItems.Count; i ++) theValue = theValue + "/n" + Item.ListSubItems(i).Text
   myValue.value = theValue
</script>
<body onload = 'InitList(myList, myTale, 4, 5, false)' scroll = 'no' bgcolor = 'buttonface' topmargin='0' leftmargin='0'>
<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse' width='100%' height='100%'>
<tr>
<td nowrap>
<script language = 'javascript'>
document.write( "<object classid='clsid:BDD1F04B-858B-11D1-B16A-00C0F0283628' style = 'width:" + (document.body.clientWidth - 150) + ";height:" + document.body.clientHeight + "' id='myList'></object> ")
</script>

<table border = '1' id = 'myTale' style = 'display:none'>
<tr id = 'tablehead'>
<td id = 'mytd'>
编号
</td>
<td id = 'mytd'>
名称
</td>
<td id = 'mytd'>
价格
</td>
<td id = 'mytd'>
备注
</td>
<td id = 'mytd'>
编号
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
101
</td>
<td id = 'mytd'>
53度特酿
</td>
<td id = 'mytd'>
186
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
16
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
102
</td>
<td id = 'mytd'>
52趵突泉特酿
</td>
<td id = 'mytd'>
128
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
17
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
103
</td>
<td id = 'mytd'>
39度精品趵突泉特酿
</td>
<td id = 'mytd'>
60
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
18
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
104
</td>
<td id = 'mytd'>
34度趵突泉特酿
</td>
<td id = 'mytd'>
45.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
19
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
105
</td>
<td id = 'mytd'>
36度趵突泉特酿
</td>
<td id = 'mytd'>
25.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
20
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
106
</td>
<td id = 'mytd'>
38度趵突泉特酿
</td>
<td id = 'mytd'>
15.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
21
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
107
</td>
<td id = 'mytd'>
39度趵突泉特酿
</td>
<td id = 'mytd'>
10.58
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
22
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
108
</td>
<td id = 'mytd'>
39度五年趵突泉陈酿
</td>
<td id = 'mytd'>
19.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
23
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
109
</td>
<td id = 'mytd'>
39度八年趵突泉陈酿
</td>
<td id = 'mytd'>
29.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
24
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
110
</td>
<td id = 'mytd'>
58度珍品趵突泉特酿
</td>
<td id = 'mytd'>
288
</td>
<td id = 'mytd'>
1*4
</td>
<td id = 'mytd'>
25
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
111
</td>
<td id = 'mytd'>
52度250ml趵突泉特酿
</td>
<td id = 'mytd'>
64
</td>
<td id = 'mytd'>
1*8
</td>
<td id = 'mytd'>
26
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
123
</td>
<td id = 'mytd'>
38度趵突泉特酿(金)
</td>
<td id = 'mytd'>
78
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
27
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
124
</td>
<td id = 'mytd'>
38度趵突泉特酿(银)
</td>
<td id = 'mytd'>
58
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
28
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
114
</td>
<td id = 'mytd'>
32度趵突泉特酿
</td>
<td id = 'mytd'>
48
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
29
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
120
</td>
<td id = 'mytd'>
39度锦绣川特酿(瓷)
</td>
<td id = 'mytd'>
19.8
</td>
<td id = 'mytd'>
1*12
</td>
<td id = 'mytd'>
30
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
121
</td>
<td id = 'mytd'>
36度趵突泉特酿(瓷瓶)
</td>
<td id = 'mytd'>
48
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
31
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
122
</td>
<td id = 'mytd'>
34度趵突泉特酿(瓷瓶)
</td>
<td id = 'mytd'>
88
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
32
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
207
</td>
<td id = 'mytd'>
48度趵突泉特曲
</td>
<td id = 'mytd'>
5
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
33
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
210
</td>
<td id = 'mytd'>
44度趵突泉特曲
</td>
<td id = 'mytd'>
3.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
34
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
211
</td>
<td id = 'mytd'>
44度新趵突泉特曲
</td>
<td id = 'mytd'>
4.2
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
35
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
214
</td>
<td id = 'mytd'>
44度趵突泉白酒
</td>
<td id = 'mytd'>
1.5
</td>
<td id = 'mytd'>
1*10
</td>
<td id = 'mytd'>
36
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
216
</td>
<td id = 'mytd'>
44度趵突泉二曲
</td>
<td id = 'mytd'>
1.4
</td>
<td id = 'mytd'>
1*10
</td>
<td id = 'mytd'>
37
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
218
</td>
<td id = 'mytd'>
39度万竹园特酿
</td>
<td id = 'mytd'>
5
</td>
<td id = 'mytd'>
1*20
</td>
<td id = 'mytd'>
38
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
218
</td>
<td id = 'mytd'>
39度万竹园特酿
</td>
<td id = 'mytd'>
5
</td>
<td id = 'mytd'>
1*12
</td>
<td id = 'mytd'>
40
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
219
</td>
<td id = 'mytd'>
46度趵突泉桶装酒
</td>
<td id = 'mytd'>
15.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
41
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
220
</td>
<td id = 'mytd'>
54度锦绣川桶装酒
</td>
<td id = 'mytd'>
16
</td>
<td id = 'mytd'>
1*4
</td>
<td id = 'mytd'>
42
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
232
</td>
<td id = 'mytd'>
50趵突泉大曲
</td>
<td id = 'mytd'>
2.5
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
43
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
235
</td>
<td id = 'mytd'>
50趵突泉老窖
</td>
<td id = 'mytd'>
4
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
44
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
236
</td>
<td id = 'mytd'>
42度趵突泉陈酿
</td>
<td id = 'mytd'>
4.5
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
45
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
245
</td>
<td id = 'mytd'>
42度趵突泉酒
</td>
<td id = 'mytd'>
4
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
46
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
333
</td>
<td id = 'mytd'>
42度趵突泉佳酿
</td>
<td id = 'mytd'>
5.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
47
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
336
</td>
<td id = 'mytd'>
38度趵突泉特酿
</td>
<td id = 'mytd'>
8.1
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
48
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
339
</td>
<td id = 'mytd'>
38度趵突泉特酿
</td>
<td id = 'mytd'>
8.3
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
49
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
125
</td>
<td id = 'mytd'>
38度礼品特酿(2瓶装)
</td>
<td id = 'mytd'>
158
</td>
<td id = 'mytd'>
1*2*4
</td>
<td id = 'mytd'>
50
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
238
</td>
<td id = 'mytd'>
40度趵突泉酒
</td>
<td id = 'mytd'>
3.6
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
51
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
262
</td>
<td id = 'mytd'>
46度趵突泉特酿
</td>
<td id = 'mytd'>
9
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
52
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
263
</td>
<td id = 'mytd'>
46度趵突泉特酿
</td>
<td id = 'mytd'>
9
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
53
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
242
</td>
<td id = 'mytd'>
44度趵突泉老窖
</td>
<td id = 'mytd'>
1.8
</td>
<td id = 'mytd'>
1*10
</td>
<td id = 'mytd'>
54
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
117
</td>
<td id = 'mytd'>
38度礼品特酿
</td>
<td id = 'mytd'>
88
</td>
<td id = 'mytd'>
1*4
</td>
<td id = 'mytd'>
55
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
244
</td>
<td id = 'mytd'>
42度趵突泉酒
</td>
<td id = 'mytd'>
4
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
56
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
247
</td>
<td id = 'mytd'>
40度趵突泉酒
</td>
<td id = 'mytd'>
6
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
57
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
126
</td>
<td id = 'mytd'>
54度礼品特酿(2瓶装)
</td>
<td id = 'mytd'>
488
</td>
<td id = 'mytd'>
1*2*4
</td>
<td id = 'mytd'>
58
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
249
</td>
<td id = 'mytd'>
44度趵突泉特曲
</td>
<td id = 'mytd'>
4.53
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
59
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
264
</td>
<td id = 'mytd'>
54度锦绣川佳酿
</td>
<td id = 'mytd'>
3.8
</td>
<td id = 'mytd'>
1*8
</td>
<td id = 'mytd'>
60
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
265
</td>
<td id = 'mytd'>
44度锦绣川白酒
</td>
<td id = 'mytd'>
8
</td>
<td id = 'mytd'>
1*4
</td>
<td id = 'mytd'>
61
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
252
</td>
<td id = 'mytd'>
44度卧虎山白酒
</td>
<td id = 'mytd'>
2.6
</td>
<td id = 'mytd'>
1*12
</td>
<td id = 'mytd'>
62
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
253
</td>
<td id = 'mytd'>
38度趵突泉特酿(实惠型)
</td>
<td id = 'mytd'>
3.6
</td>
<td id = 'mytd'>
1*8
</td>
<td id = 'mytd'>
63
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
253
</td>
<td id = 'mytd'>
38度趵突泉特酿(实惠型)
</td>
<td id = 'mytd'>
3.6
</td>
<td id = 'mytd'>
1*12
</td>
<td id = 'mytd'>
64
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
254
</td>
<td id = 'mytd'>
38度125ml趵突泉特酿
</td>
<td id = 'mytd'>
2
</td>
<td id = 'mytd'>
1*24
</td>
<td id = 'mytd'>
65
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
255
</td>
<td id = 'mytd'>
38度趵突泉酒
</td>
<td id = 'mytd'>
6.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
66
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
256
</td>
<td id = 'mytd'>
35度趵突泉特曲
</td>
<td id = 'mytd'>
5.6
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
67
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
258
</td>
<td id = 'mytd'>
46度趵突泉酒
</td>
<td id = 'mytd'>
4.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
68
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
259
</td>
<td id = 'mytd'>
44度趵突泉特曲
</td>
<td id = 'mytd'>
3.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
69
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
260
</td>
<td id = 'mytd'>
42度趵突泉特曲(简装)
</td>
<td id = 'mytd'>
3.18
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
70
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
261
</td>
<td id = 'mytd'>
50度趵突泉特曲(捆扎)
</td>
<td id = 'mytd'>
2
</td>
<td id = 'mytd'>
1*10
</td>
<td id = 'mytd'>
71
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
315
</td>
<td id = 'mytd'>
38度趵突泉特酿(招财进宝)
</td>
<td id = 'mytd'>
6.5
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
72
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
318
</td>
<td id = 'mytd'>
42度趵突泉醇香
</td>
<td id = 'mytd'>
3.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
73
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
321
</td>
<td id = 'mytd'>
42度趵突泉特曲
</td>
<td id = 'mytd'>
3.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
74
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
323
</td>
<td id = 'mytd'>
38度趵突泉特酿
</td>
<td id = 'mytd'>
8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
75
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
326
</td>
<td id = 'mytd'>
39度趵突泉特酿(一级)
</td>
<td id = 'mytd'>
3.5
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
76
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
329
</td>
<td id = 'mytd'>
44度趵突泉特酿
</td>
<td id = 'mytd'>
5.4
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
77
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
331
</td>
<td id = 'mytd'>
44度趵突泉特酿
</td>
<td id = 'mytd'>
5.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
78
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
332
</td>
<td id = 'mytd'>
44度趵突泉酒
</td>
<td id = 'mytd'>
5.5
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
79
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
339
</td>
<td id = 'mytd'>
38度趵突泉特酿
</td>
<td id = 'mytd'>
8.3
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
80
</td>
</tr>
<tr id = 'mytr'>
<td id = 'mytd'>
259
</td>
<td id = 'mytd'>
44度趵突泉特曲
</td>
<td id = 'mytd'>
3.8
</td>
<td id = 'mytd'>
1*6
</td>
<td id = 'mytd'>
83
</td>
</tr>
</table>
</td>
<td nowrap width='150' align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber1">
<tr>
<td> </td>
</tr>
<tr>
<td>&nbsp;内容:</td>
</tr>
<tr>
<td>
&nbsp;
<textarea rows="10" name="myValue" cols = '16'></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script language = "javascript">
//function chageSize()
//{
//myList.width = document.body.clientWidth - 150
//myList.height = document.body.clientHeight
//alert(document.body.clientWidth - 150)
//setTimeout("chageSize()", 10)
//}
//chageSize()
</script>

你可能感兴趣的:(JavaScript:ListView示例)