如何动态的给html页面中的下拉列表添加一行值,也就是说原来有三个选项,现在多加一项!

如何动态的给html页面中的下拉列表添加一行值,也就是说原来有三个选项,现在多加一项!,第1张

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

function add(){

var option = null

var temp= document.getElementById("select")

option = document.createElement("option")

option.appendChild(document.createTextNode(document.getElementById("textfield").value))

option.vaule = document.getElementById("textfield").value

temp.appendChild(option)

}

</script>

</head>

<body>

<label>

<input type="text" name="textfield" id="textfield" />

</label>

<label>

<input type="submit" name="button" id="button" value="添加" onclick="add()"/>

</label>

<label>

<select name="select" id="select">

<option value="111">111</option>

<option value="222">222</option>

</select>

</label>

</body>

</html>

<html>

<head>

<title>

</title>

<script src="js/jquery-1.4.2_min.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

var row_count = 0

function addNew()

{

var table1 = $('#table1')

var firstTr = table1.find('tbody>tr:first')

var row = $("<tr></tr>")

var td = $("<td></td>")

td.append($("<input type='checkbox' name='count' value='New'><b>CheckBox"+row_count+"</b>")

)

row.append(td)

table1.append(row)

row_count++

}

function del()

{

var checked = $("input[type='checkbox'][name='count']")

$(checked).each(function(){

if($(this).attr("checked")==true) //注意:此处判断不能用$(this).attr("checked")==‘true'来判断。

{

$(this).parent().parent().remove()

}

})

}

</script>

</head>

<body>

<input type="button" value="Add" onclick="addNew()">

<input type="button" value="Delete" onclick="del()">

<div id="rightcontent">

<table id="table1" cellspacing="3" cellpadding="3" border="1">

<tbody>

<tr>

<th>

Add new row,then test the delete function.

</th>

</tr>

</tbody>

</table>

</div>

</body>

</html>

行的 *** 作比较简单,有现成的api

table.insertRow(index)

table.deleteRow(index)

列的 *** 作比较麻烦,需要检索每一行, *** 作对应的单元格。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11899062.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存