请问我要动态生成html一些标签怎么做？

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

用javascript怎么做？

13 个解决方案

#1

等下，我给你写一个

#2

<div id="test"><ul></ul></div>
<input type="button" value="增加一行" onclick="addRow();" />

<script type="text/javascript">
function delRow(k)
{
    var a=document.getElementById("test").getElementsByTagName("ul")[0];
    var b=a.getElementsByTagName("li");
    var index;
    for(i=0;i<b.length;i++)
    {
        if(b[i].id=="li"+k)
        {
            index=i;
            break;
        }
    }
    var c=a.children(index);
    a.removeChild(c); 

}
function addRow()
{
    var o=document.getElementById("test").getElementsByTagName("li");
    var index=o.length+1;
    var _html='<input type="button" value="删除'+index+'" onclick="delRow('+index+');" /><select><option value="1">测试'+index+'</option></select>';
    var  a = document.createElement( "li");
    a.id="li"+index;
    a.innerHTML=_html; 
    var b=document.getElementById("test").getElementsByTagName("ul")[0];
    b.appendChild(a); 
}
</script>

#3

保存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>

#4

保存html个时候，如果有乱码请将
<meta http-equiv="Content-Type" content="text/html; charset= utf-8"/>

换成
<meta http-equiv="Content-Type" content="text/html; charset= gbk"/>

#5

我上面的代码，要做一些浏览器兼容性的修正，修正后如下：

<div id="test"><ul></ul></div>
<input type="button" value="增加一行" onclick="addRow();" />

<script type="text/javascript">
function delRow(k)
{
    var a=document.getElementById("test").getElementsByTagName("ul")[0];
    var b=a.getElementsByTagName("li");
    var index;
    for(i=0;i<b.length;i++)
    {
        if(b[i].id=="li"+k)
        {
            index=i;
            break;
        }
    }
    a.removeChild(b[index]); 
}
function addRow()
{
    var o=document.getElementById("test").getElementsByTagName("li");
    var index=o.length+1;
    var _html='<input type="button" value="删除'+index+'" onclick="delRow('+index+');" /><select><option value="1">测试'+index+'</option></select>';
    var  a = document.createElement( "li");
    a.id="li"+index;
    a.innerHTML=_html; 
    var b=document.getElementById("test").getElementsByTagName("ul")[0];
    b.appendChild(a); 
}
</script>

#6

我的代码可以根据下拉框选择进行删除，也可以点击想要删除的div进行删除

#7

谢谢楼上2位。
crying_boy 理解的要求是对的。
不过试图把crying_boy的代码从ul和li标签换成table和tr但是失败了。
现在add没成功，delete还没调试过。


<!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(k)
{
    var a=document.getElementById("test");
    var b=a.getElementsByTagName("tr");
    var index;
    for(i=0;i<b.length;i++)
    {
        if(b[i].id=="tr"+k)
        {
            index=i;
            break;
        }
    }
    var c=a.children(index);
    a.removeChild(c); 

}
function addRow()
{
    var o=document.getElementById("test").getElementsByTagName("tr");
    var index=o.length;
    var _html='<td><input type="button" value=" delete'+index+'" onclick="delRow('+index+');" /></td><td><select><option value="1">No.'+index+'</option></select></td>';
    var  a = document.createElement("tr");
    a.id="tr"+index;
    a.innerHTML=_html; 
    var b=document.getElementById("test");
    b.appendChild(a); 
}
</script>
  </head>
   
  <body>

<input type="button" value="add" onclick="addRow();" />
<table id="test" border="1">
  <tr>
    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	</th>
    <th>Context</th>
  </tr>
</table>


  </body>
</html>

#8

<!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="test" border="1">
  <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    </td>
    <td>Context</td>
  </tr>
</table>


  </body>
</html>

#9

<!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(){
     $('#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.<input type="button"  value="删除"/><select><option>我是第'+num+'个DIV.</option></select></div>');
     con.find('input[value="删除"]').click(function(){
     $(this).parent().remove();
     })
     $('#d_rows_msg').append(con);
     })
    })
    </script>
  </head>

  <body>
  <input type="button" value="添加一行" id="btn_addRow">
    <div id="d_rows_msg"></div>
  </body>
</html>

#10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <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(){
     $('#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.<input type="button"  value="删除"/><select><option>我是第'+num+'个DIV.</option></select></div>');
     con.find('input[value="删除"]').click(function(){
     $(this).parent().remove();
     })
     $('#d_rows_msg').append(con);
     })
    })
    </script>
  </head>

  <body>
  <input type="button" value="添加一行" id="btn_addRow">
    <div id="d_rows_msg"></div>
  </body>
</html>

#11

引用 7 楼的回复:

谢谢楼上2位。
crying_boy 理解的要求是对的。
不过试图把crying_boy的代码从ul和li标签换成table和tr但是失败了。
现在add没成功，delete还没调试过。

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
……

table的结构与div的是不同的。比如一个完整的table中应该是有tbody的

#12

谢谢2位。结贴了。

#13

to crying_boy
不好意思，还想问下，你在某楼提到你为了其他浏览器也能执行改了点什么？
1)你改了什么？？
2）最后你改的代码firefox也能执行吧？

#1