HTML 用JS增加table一行所有内容的实现

摘要:
因为我们不太使用JS,所以我们需要在最近需要编写接口时实现它——单击按钮向表中添加一行。最后,我通过在脚本中编写一个函数实现了这一点,如下所示。最后,这很简单。我们可以通过和onclick=“addRow()”直接调用它的onclick事件,以满足需求。毕竟,我不熟悉HTMLJS,所以我希望你或我能在将来纠正任何错误。9varcell2=row.insertCell;10cell2.innerHTML=“”;11varcell3=row.insertCell;12cell3.innerHTML=“PO”+13“POUpdate“+14”ASN“+15”Receiver“;//在此处插入第四个单元格的内容。需要注意的是,这里的换行最好使用“+”格式。

    因为对JS用的不多,最近需要写界面的时候需要实现——通过点击一个button让table增加一行(和前面行内的内容一致,无论是dropdown还是checkbox)。HTML 用JS增加table一行所有内容的实现第1张可自己硬是无从下手,从网上搜的答案总是各有不同。最后自己通过这样的方法实现了:

步骤基本是这样的:

在script里面写一个Function如下。

      最后就简单了,我们直接通过<input type="button" value="More" name="More" onclick="addRow()" /> 调用它的onclick事件,onclick="addRow()"即可以实现需求。

      毕竟自己对HTML JS这块不熟,所以有错误的地方希望由大家或者日后的我来纠正。

 1 function addRow() {
 2     var table = document.getElementById("mytableid");
      //得到我们需要用到的table
3 var rowsNum = table.length;
      //计算出table的现有行数
4 var row = table.insertRow(4);
      //创建一行,并插入到上面的table中,我这里是直接在第四行起开始插入
5 var cell0 = row.insertCell(0);
      //插入新建row的第一个单元格
6 cell0.innerHTML = "<input type='checkbox' name='checkbox1' value='checkbox'>";
      //在第一个单元格,也就是td中插入内容,我这里的第一个是一个checkbox
7 var cell1 = row.insertCell(1); 8 cell1.innerHTML = "<input type='text' name='fname' />";
      //依次插入后续单元格的内容,这里需要注意的是innerHTML方法中的内容是不应该含td标签的,它
        替换的应该是我们的HTML代码部分,如果是文本则应该是innerText(注意大小写)。
9 var cell2 = row.insertCell(2); 10 cell2.innerHTML = "<input type='text' name='fname' />"; 11 var cell3 = row.insertCell(3); 12 cell3.innerHTML = "<input type='checkbox' />PO " + 13 "<input type='checkbox' />PO Update " + 14 "<input type='checkbox' />ASN " + 15 "<input type='checkbox' />Receiver ";
      //这里插入第四个单元格内容(从0开始),需要注意的是这里如果换行的话最好用“ ” + “ ”的格式。
16 var cell4 = row.insertCell(4); 17 cell4.innerHTML = "<select name='Trigger' class='wtw'> " + 18 "<option value='Manual'>Manual</option>" + 19 "<option value='Data Trigger on going' >" + 20 "Data Trigger on going</option>"; 21 var cell5 = row.insertCell(5); 22 cell5.innerHTML = "<select name='Trigger' class='wtw'> " + 23 "<option value='Manual' width='100%'>Y &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + 24 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + 25 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + 26 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + 27 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + 28 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>" + 29 "<option value='Data Trigger on going' >" + "N</option>";

免责声明:文章转载自《HTML 用JS增加table一行所有内容的实现》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Sqlserver------SQLServer2008R2中新增用户并设定表的访问权限Redhat 5上OPENLDAP的安装备份和恢复下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

[转]innerHtml,innerText,outterHtml,outterText 的区别

js中innerHTML与innerText的用法与区别 用法: Java代码 <divid="test"> <spanstyle="color:red">test1</span>test2 </div> <div id="test"> <span style...

如何在TypeScript中使用JS类库

使用流程 1.首先要清除类库是什么类型,不同的类库有不同的使用方式 2.寻找声明文件 JS类库一般有三类:全局类库、模块类库、UMD库。例如,jQuery是一种UMD库,既可以通过全局方式来引用,也可以模块化引用。 声明文件 当我们要使用一个类库时,需要ts声明文件,对外暴露API,有时候声明文件在源码中,大部分是单独提供额外安装。比如jQuery需要额外...

handsontable 问题

碰到问题了,去官网上找community:http://docs.handsontable.com/0.16.1/tutorial-quick-start.html 1、 描述:把handson table放在bootstrap tab中,首次没有激活,table没有正常显示。 原因:这种情况下,table invisible,所以不会调用render()...

公众号微信支付流程-(转)

微信支付类型 微信支付实际上有很多种不同的类型,具体要使用哪一种就需要根据不同的应用场景来选择,官方给出的参考例子: 刷卡支付:用户打开微信钱包的刷卡的界面,商户扫码后提交完成支付。 公众号支付:用户在微信内进入商家H5页面,页面内调用JSSDK完成支付 扫码支付:用户打开"微信扫一扫“,扫描商户的二维码后完成支付 APP支付:商户APP中集成微信SD...

DB2查询前100到后200之间的数据

select T.sicCd form Table T where T.sicCd not in ( select sicCd form Table fetch first 100 rows only ) fetch first 100 rows only...

如何解决PC端和移动端自适应问题?

   做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px、960...