/**PageBeginHtml Block Begin **/ /***自定义返回顶部小火箭***/ /*生成博客目录的JS 开始*/ /*生成博客目录的JS 结束*/

动态添加td输入框

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客,仅做学习讨论之用,不做商业用途。
* 如有侵权,马上联系我,我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

复制代码
复制代码
function addRow() { 
        var tab=document.getElementById("tab");
        var n=document.getElementById("x").rowIndex+1;
        var tr=tab.insertRow(n);
        var td=tr.insertCell(0);                                                                                                                                                                                                                                                                     
        tr.innerHTML="<td class=\"table_body\" align=\"right\">日志内容</td><td class=\"table_none\" colspan=\"3\"><input name=\"syslogcontentcontent\" type=\"text\" id=\"pcuploadjpg\" style=\"width:64%\" onchange=\"CheckExt(this)\"></td><td class=\"table_none\"><img src=\"${ctx }/img/button/btn_delete_0.png\" btn=btn title='删除'  onClick=\"deleteRow(this)\" ></td>";
    }
复制代码
复制代码
function deleteRow(obj) {
        $(obj).parent().parent().remove();
    }

 

动态在div中添加input框

1
2
3
4
5
6
7
8
function  hh(){
          $("#zw1").append('<span id="news_' + InputCount+ '"><li style="margin-top:10px;" class="horizontal_onlyRight" ><input type="text" name="zw11" class="text_input100" onkeyup="tihuan(this)"  value=""/></li>'+"<li style='margin-top:10px;  margin-right:7px;' class=\"horizontal_onlyRight\" ><img onmouseover=\"JavaScript:$(this).attr('src','${ctx }/img/newbtn/delete_1.png');\" onmouseout=\"JavaScript:$(this).attr('src','${ctx }/img/newbtn/delete_0.png');\" src='${ctx }/img/newbtn/delete_0.png' btn=btn title='删除' onclick='javascript:deleteRowSpecs1(this,"+InputCount+");'></li><span/>");
          InputCount++;
     }
          function  hh1(){
              $("#zw2").append('<span id="news_' + InputCount+ '"><li style="margin-top:10px;"  class="horizontal_onlyRight" ><input type="text" name="zw22" onkeyup="tihuan(this)" class="text_input100"  ></li>'+"<li style='margin-top:10px;  margin-right:7px;'  class=\"horizontal_onlyRight\"><img onmouseover=\"JavaScript:$(this).attr('src','${ctx }/img/newbtn/delete_1.png');\" onmouseout=\"JavaScript:$(this).attr('src','${ctx }/img/newbtn/delete_0.png');\" src='${ctx }/img/newbtn/delete_0.png' btn=btn title='删除' onclick='javascript:deleteRowSpecs1(this,"+InputCount+");'></li><span/>");
              InputCount++;
       }

  

1
2
3
4
5
<div id="zw1" style="margin-bottom : 60px; margin-top:10px;" >
                           <li class="horizontal_onlyRight" style="margin-top:10px;">
                           <input name="zw11" class="text_input100" id="zw11" onkeyup="tihuan(this)" value="">     
                           </li>
                         </div>

1、innerHTML写入html代码方法,是原生态JS方法:
<div id="box"></div>
<script>document.getElementById("box").innerHTML="需要像box内写入的内容"</script>
2、append()是jQuery中的方法,需要先引用jQuery库代码。
<div id="box"></div>
<script>
$("#box").append("需要像box内写入的内容");
</script>

posted @   一品堂.技术学习笔记  阅读(743)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
历史上的今天:
2018-09-24 Oracle 中 nvl、nvl2、nullif、coalesce、decode 函数的用法详解
2017-09-24 sqlplus用户登录
2017-09-24 OracleOCP认证 之 Linux基础
2017-09-24 解决Linux安装 VMware tools 工具的方法
点击右上角即可分享
微信分享提示