js怎么实现这个功能？当下拉菜单选择1时，构建一行表格，为2是构建2行表格...完成一个循环
用<tr><tdwidth="151"align="right"></td><td><selectname="select"onmouseout="MM_callJS('...
用
<tr>
<td width="151" align="right"> </td>
<td>
<select name="select" onmouseout="MM_callJS('write_table')" >
<option>-选择名称-</option>
<option >1</option>
<option >2</option>
</select> </td>
</tr> 展开
<tr>
<td width="151" align="right"> </td>
<td>
<select name="select" onmouseout="MM_callJS('write_table')" >
<option>-选择名称-</option>
<option >1</option>
<option >2</option>
</select> </td>
</tr> 展开
展开全部
下面是我的代码示例：
但有些问题需要说明下，因为select标签在使用中，有很多人喜欢点击后选择，相当于点击两次，所以事件加在它上面，会降低用户体验，所以加一个按钮才合理些；
代码通过测试，满足你所描述的要求。
————————
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript">
//事件
function addTr(){
var th = document.getElementById("sel");
var value = th.options[th.options.selectedIndex].value;
var table = th.parentNode.parentNode.parentNode;
var tdCount = th.parentNode.parentNode.getElementsByTagName("td").length;
document.title = tdCount;
if(value>0)
{
for(var i=0; i<value; i++){
var tr = createTag(table, "tr", "tr");
for(var n=0; n<tdCount; n++){
var td = createTag(tr, "td");
td.innerHTML = "单元格内容" + (n+1);
}
}
}
}
//简化创建标签
function createTag(parentTag, tagName, className)
{
var tag = document.createElement(tagName);
parentTag.appendChild(tag);
if(className) tag.claasName = className;
return tag;
}
</script>
</head>
<style type="text/css">
td{
border:1px solid #666;
}
</style>
<body>
<table>
<tr class="tr">
<td width="151" align="right">新增行数：</td>
<td>
<select name="select" id="sel">
<option>-选择名称-</option>
<option>1</option>
<option>2</option>
<option>5</option>
</select><input type="button" value="增加行" onclick="addTr()"/></td>
</tr>
</table>
</body>
</html>
但有些问题需要说明下，因为select标签在使用中，有很多人喜欢点击后选择，相当于点击两次，所以事件加在它上面，会降低用户体验，所以加一个按钮才合理些；
代码通过测试，满足你所描述的要求。
————————
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript">
//事件
function addTr(){
var th = document.getElementById("sel");
var value = th.options[th.options.selectedIndex].value;
var table = th.parentNode.parentNode.parentNode;
var tdCount = th.parentNode.parentNode.getElementsByTagName("td").length;
document.title = tdCount;
if(value>0)
{
for(var i=0; i<value; i++){
var tr = createTag(table, "tr", "tr");
for(var n=0; n<tdCount; n++){
var td = createTag(tr, "td");
td.innerHTML = "单元格内容" + (n+1);
}
}
}
}
//简化创建标签
function createTag(parentTag, tagName, className)
{
var tag = document.createElement(tagName);
parentTag.appendChild(tag);
if(className) tag.claasName = className;
return tag;
}
</script>
</head>
<style type="text/css">
td{
border:1px solid #666;
}
</style>
<body>
<table>
<tr class="tr">
<td width="151" align="right">新增行数：</td>
<td>
<select name="select" id="sel">
<option>-选择名称-</option>
<option>1</option>
<option>2</option>
<option>5</option>
</select><input type="button" value="增加行" onclick="addTr()"/></td>
</tr>
</table>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
