请教小弟我要动态生成html一些标签如何做-JavaSript-爱易网页

请教小弟我要动态生成html一些标签如何做

日期：2014-05-16　浏览次数：20427 次

请问我要动态生成html一些标签怎么做？
应该不难，但是时间紧就在这里问了。
页面上一个按钮按了后，在某处（例如就在这个按钮下面）添加一行。
一行内容为
一个删除按钮（左），一个下拉框。（右）
再按一下，再生成一行。（可按任意次）
按生成的删除按钮后，该行被删除。

用javascript怎么做？

------解决方案--------------------
保存html格式，直接运行，看看是不是你想要的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#d_rows_msg{ width: 100%; height: 100%;}
.d_html{ width: 100%; border: 1px solid black; font-size: 12px; height: 25px; line-height: 25px; margin: 10px 0 0 0; cursor: pointer;}
.d_html:hover{ width: 100%; border: 1px solid #fff; font-size: 12px; height: 25px; line-height: 25px; margin: 10px 0 0 0; cursor: pointer;
color: #fff; background: black; font-weight: bold;}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var d_id;
$('#btn_addRow').click(function(){
var num=$('#d_rows_msg').find('div').length+1;
var con=$('<div id="d_html_'+num+'" class="d_html">我是第'+num+'个DIV.</div>');
con.data('num',"d_html_"+num);
con.click(function(){
d_id=$(this).data('num');
})
$('#d_rows_msg').append(con);
$('#sel_html').append('<option value="d_html_'+num+'">我是第'+num+'个DIV.</option>').val("d_html_"+num);
})

$('#btn_delRow').click(function(){
if(d_id==null || d_id==undefined){
d_id=$('#sel_html').val();
}
$('#d_rows_msg #'+d_id+'').remove();
$('#sel_html').val(0);
$('#sel_html option[value='+d_id+']').remove();
d_id=null;
})
})
</script>
</head>

<body>
<input type="button" value="添加一行" id="btn_addRow">
<input type="button" value="删除" id="btn_delRow">
<select id="sel_html">
</select>
<div id="d_rows_msg"></div>
</body>
</html>

------解决方案--------------------

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=shift-jis"/>

<script type="text/javascript">
function delRow(o)
{
    var tr=o.parentNode.parentNode;
    var tbody=tr.parentNode;
    tbody.removeChild(tr);


}
function addRow()
{
    var o=document.getElementById("test").getElementsByTagName("tr");
    var index=o.length;

    var  _tr = document.createElement("tr");

    var td1=document.createElement("td");
    td1.innerHTML= '<input type="button" value=" delete'+index+'" onclick="delRow(this);" />';
    
    var td2=document.createElement("td");
    td2.innerHTML= '<select><option value="1">No.'+index+'</option></select>';
    
    _tr.appendChild(td1);
    _tr.appendChild(td2);
    
    var otbale=document.getElementById("test");
    otbale.getElementsByTagName("tbody")[0].appendChild(_tr);
}
</script>
  </head>
   
  <body>

<input type="button" value="add" onclick="addRow();" />
<table id="

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

请教小弟我要动态生成html一些标签如何做

相关资料更多>

推荐阅读更多>