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

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

用javascript怎么做？
...全文
501 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
scbb 2012-09-03
  • 打赏
  • 举报
 回复
to crying_boy
不好意思，还想问下，你在某楼提到你为了其他浏览器也能执行改了点什么？
1)你改了什么？？
2）最后你改的代码firefox也能执行吧？
scbb 2012-09-03
  • 打赏
  • 举报
 回复
谢谢2位。 结贴了。
泡泡鱼_ 2012-09-03
  • 打赏
  • 举报
 回复
[Quote=引用 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>
……
[/Quote]

table的结构与div的是不同的。比如一个完整的table中应该是有tbody的
snjcaorui 2012-09-03
  • 打赏
  • 举报
 回复
<!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>
snjcaorui 2012-09-03
  • 打赏
  • 举报
 回复
<!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>
泡泡鱼_ 2012-09-03
  • 打赏
  • 举报
 回复 
<!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>          </td>

    <td>Context</td>

  </tr>

</table>





  </body>

</html>
scbb 2012-09-03
  • 打赏
  • 举报
 回复
谢谢楼上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>      	</th>

    <th>Context</th>

  </tr>

</table>





  </body>

</html>

snjcaorui 2012-09-03
  • 打赏
  • 举报
 回复
我的代码可以根据下拉框选择进行删除，也可以点击想要删除的div进行删除
泡泡鱼_ 2012-09-03
  • 打赏
  • 举报
 回复
我上面的代码，要做一些浏览器兼容性的修正，修正后如下：
<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>


snjcaorui 2012-09-03
  • 打赏
  • 举报
 回复
保存html个时候，如果有乱码请将
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

换成
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
snjcaorui 2012-09-03
  • 打赏
  • 举报
 回复
保存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>
泡泡鱼_ 2012-09-03
  • 打赏
  • 举报
 回复 
<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>
snjcaorui 2012-09-03
  • 打赏
  • 举报
 回复
等下，我给你写一个
【生成html5代码】最全html5基础学习并生成代码
课程前部分介绍网页组成元素，浏览器内核，网页骨架，基本标签，标签属性 中间部分学习网站中常用的标签，如...相对之前几节稍微复杂一些，但通过guiplan软件一键生成代码，我们也可以像普通标签一样用起来非常简单。
动态生成的HTML标签如何绑定事件
动态用js往HTML生成标签之后如何对生成的HTML标签绑定事件；尝试了很多种方法之后就是绑定不上；不成功的案例：$("#id").change(function(){ console.log('需要执行的事情');})；发现用上述的方法，对用...
jquery中给动态生成的标签添加点击事件
jquery中给动态生成的标签添加点击事件一、问题描述二、解决问题三、另外一些方案 一、问题描述 在做项目的过程中，有一个需求，点击按钮，动态添加一行，然后点击删除按钮删除这一行，我首先想到的是就直接绑定点击...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成htmltable标签中内容js生成html代码js代码 table标签中内容js生成 html代码 <div> <table id="message-table" > <thead> <tr > <th class="text-center hidden-xs"&...
Java使用FreeMarker模板引擎动态生成html页面
因一个功能需要动态生成HTML文件，所以接触了下FreeMarker模板引擎。一般可以使用该模板引擎来生成月报，日报，单据报表等等。我们都知道预先生成静态HTML文件，当访问时可以提高效率的。 Freemarker简单介绍 ...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章