javascript 如何创建一个list

JavaScript013

javascript 如何创建一个list,第1张

很简单的一个使用：点击菜单，能够显示下面的或者不显示

1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该node.style.overflow="visible"当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽。

2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

具体代码如下。

<!DOCTYPE html>

<html>

<head>

<!-- 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该

node.style.overflow="visible"

2，采用同样的技术，多加几个，但是就是传参数比较麻烦

-->

<title>list.html</title>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

dl{

height:18px/*优先级问题，必须要写*/

overflow:hidden

}

dd{

margin:0px

padding:0px

}

.close{

height:18px/*优先级问题，必须要写*/

overflow:hidden

}

.open{

height:80px

overflow:visible

background-color:#ff8000

}

</style>

<script type="text/javascript">

function click2(node1){

//                      alert("aa"+node.nodeName)// td

var nodes=node1.parentNode

//                      alert(nodes.nodeName)

//  alert("aa"+nodes.className)

//※※通过传进的对象 判断采用哪种css模式

if(nodes.className=="open"){

nodes.className="close"

}else{

nodes.className="open"

}

}

</script>

</head>

<body>

<!--层次列表-->

<!--当很多时候采用传参就很麻烦,每个都需要去传参

<dl>

<dt onclick="click1(0)">菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click1(1)">菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click1(2)">菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

-->

<br/>

<br/>

<hr/>

<!--<dl class="close">先手动采用css测试，可以然后采用编程使用-->

<dl>

<dt onclick="click2(this)">1菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click2(this)">2菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click2(this)">3菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

</body>

</html>

javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：

1、var objSelect = document.getElementById(select_id)。

2、var new_opt = new Option(objItemText, objItemValue)。

3、objSelect.options.add(new_opt)。

实例演示如下：

1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。

此时的显示效果如下，其中option中有三项。

2、JS的函数设计如下：

现有的options如下：

3、在页面上输入新的数据，点击添加。

此时的select效果显示如下，自由添加功能实现。

//添加新行

var iRow = 0

var tableIndex = 0

function addRow() {

iRow++

tableIndex++

document.getElementById("int_row").value = iRow

var table = document.getElementById("AddCustomer_info")

//创建新行

var newTR = table.insertRow(8+tableIndex)

//创建新单元格

var newTD1 = newTR.insertCell()

var newTD2 = newTR.insertCell()

var newTD3 = newTR.insertCell()

var newTD4 = newTR.insertCell()

var newTD5 = newTR.insertCell()

var newTD6 = newTR.insertCell()

//单元格内的内容

newTD1.innerHTML = '<asp:Label ID="newlable1" runat="server" Font-Size="10pt" Text="保有车型/品牌："></asp:Label>'

newTD1.bgColor = '#dee7ef'

newTD2.innerHTML = '<input name="txtBycx' + iRow + '" id="txtBycx' + iRow + '" type="text" />'

newTD2.bgColor = '#e8f9ed'

newTD3.innerHTML = '<asp:Label ID="newlabel2" runat="server" Font-Size="10pt" Text="年限："></asp:Label>' //单元格内的内容

newTD3.bgColor = '#dee7ef'

newTD4.innerHTML = '<input name="txtYear' + iRow + '" id="txtYear' + iRow + '" type="text" />'

newTD4.bgColor = '#e8f9ed'

newTD5.innerHTML = '<asp:Label ID="newlabel3" runat="server" Font-Size="10pt" Text="数量："></asp:Label>' //单元格内的内容

newTD5.bgColor = '#dee7ef'

newTD6.innerHTML = '<input name="txtNumber' + iRow + '" type="text" id="txtNumber' + iRow + '" type="text" /><img src="../Resource/Images/deleterows.gif" onclick="deleterow()" />'

newTD6.bgColor = '#e8f9ed'

//设置位置

newTD1.setAttribute("align", "right")

newTD2.setAttribute("align", "left")

newTD3.setAttribute("align", "right")//设置位置

newTD4.setAttribute("align", "left")

newTD5.setAttribute("align", "right")//设置位置

newTD6.setAttribute("align", "left")

}

//删除行

function deleterow() {

if (iRow >0) {

document.getElementById("int_row").value = document.getElementById("int_row").value - 2

}

var rowIndex = event.srcElement.parentElement.parentElement.rowIndex

var styles = document.getElementById("AddCustomer_info")

styles.deleteRow(rowIndex)

}