`
zjutsoft
  • 浏览: 456241 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

动态添加 td tr 表格 javascript

 
阅读更多

<html xmlns="http://www.w3.org/1999/xhtml" >
<head></head>

<script language="javascript">
function add()
{
var myTable = document.getElementById("aa");
var newRow = aa.insertRow(aa.rows.length);
var newTd1 = newRow.insertCell(0);
newTd1.innerText="lala";
var newTd2 = newRow.insertCell(1);
newTd2.innerText="^_^";
}
</script>
<body>
<form>
<input type="button" onclick="addline()" value="增加一行">
<table border="1" id="test">
<tr>
<td colspan="2"><input type="text" name="tt[]"></td>
</tr>
</table>
<input type="submit">
</form>
<script>
function addline(content){
newline=document.all.test.insertRow();
newline.insertCell().innerHTML='<input type="text" name="tt[]"><input type="button" value="删除此行" onclick="del()">'

}
function del(){
document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
<input type="button" value="点我啊" onclick="add();">
<table id="aa" border="1" bordercolor="black" style="border-collapse: collapse" width="80%">
<tr>
<td width="50%">xixi</td>
<td width="50%">haha</td>
</tr>
</table>

</body>
</html>

分享到:
评论

相关推荐

    JavaScript获取tr td 的三种方式全面总结(推荐)

    /* 第一种,原生的js,先获取table然后获取tr标签,然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...

    js动态的添加元素例如表格1

    JavaScript动态添加元素及表格操作 在JavaScript中,动态添加元素是指通过编程方式在网页中添加新的HTML元素,例如添加表格、列表、按钮等。这种技术广泛应用于Web开发中,例如在 Ajax 应用程序中,为了提供实时的...

    javascript 动态添加表格行

    表格部分代码如下: ”testTbl” border=1&gt; &lt;tr id=”tr1″&gt; &lt;td width=6%&gt;&lt;input type=checkbox id=”box1″&gt;&lt;/td&gt; &lt;td id=”b”&gt;第一行&lt;/td&gt; &lt;/tr&gt; &lt;tr id=”tr2″&gt; &lt;td width=6%&gt;&lt;input type=checkbox ...

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp &lt;tr&gt; 产品名称 编号 数量 重量 操作 ...

    javascript如何动态加载表格与动态添加表格行

    在javascript中写添加表格的语句 若在当前html文件中,则写在[removed]标签内部,如 代码如下: [removed] document.getElementById(“tbl”)[removed]=”&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;” //此处添加的表格可根据自己...

    JavaScript table 动态添加行,列

    var _td=_tr.insertCell(j); //var _tn=document.createTextNode(i.toString()+j.toString()); var t=document.createElement("input"); t.size=20; _td.appendChild(t); } } myDiv....

    【JavaScript源代码】js实现添加删除表格操作.docx

    js实现添加删除表格操作  本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击...

    JavaScript实现表格排序,点击表头切换升序降序,非常简单

    使用JavaScript实现表格排序,点击表头切换升序降序,非常简单

    【JavaScript源代码】JavaScript实现简单购物小表格.docx

     本文实例为大家分享了JavaScript实现简单购物小表格的具体代码,供大家参考,具体内容如下 html代码: &lt;table border="" cellspacing="0" cellpadding="1"&gt; &lt;tr style="background-color: #0099cc;"&gt; &lt;td&gt;...

    可以动态增加table行的javascript代码

    * &lt;tr&gt;&lt;/tr&gt; * &lt;tr bgcolor="#FFFFFF"&gt; * &lt;td height="20" align="center" bgcolor="" colspan="3"&gt; * &lt;a href="javascript:addpicrow();"&gt;增加 * &lt;a href="javascript:delpicrow();"&gt;删除 * ...

    JavaScript 自动在表格前面增加序号

    JavaScript 自动为表格增加序号 .index_tab{width:100%;border-collapse:collapse;border:1px solid #005892;margin:8px 0;} .index_tab td{line-height:35px;border:1px solid #005892;padding-left:4px;} tr.tr_...

    原创-javascript服务器交互型可编辑表格和我的js常用库

    // 动态添加事件 addEvent : function(oTarget, sEventType, funName) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType.substring(2, sEventType.length), funName, ...

    JavaScript简单表格编辑功能实现方法

    本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下: &lt;html&gt; &lt;head&gt; [removed] function getInnerHTML() { alert&#40;document.getElementById("tr2"&#41;[removed])...

    JavaScript动态操作表格实例(添加,删除行,列及单元格)

    js动态操作表格&lt;/title&gt;[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i&lt;6;i++){var row=document.createElement(“tr...

    2022年HTML相关知识点表格标签(1).pptx

    `&lt;tr&gt;` 标签用于定义表格的一行,在一组 `&lt;tr&gt;` 标签内可建立一行表格,也可以包含数组由 `&lt;td&gt;` 或 `&lt;th&gt;` 标签所定义的单元格。 `&lt;td&gt;` 标签用于定义表格的单元格,一组 `&lt;td&gt;` 标签将建立一个单元格。`&lt;td&gt;` ...

    javascript简单代码编写条纹表格附源码

    这是我用jquery框架编写的带有条纹的表格,您在使用时,请勿必先下载jquery.js这个框架,再引用。而且还要注意里的css,请你们自己编写css,范例 tr.over td{background:#536877;color:#ffffff;} .stripeMe{border:...

    网页设计实验 Javascript的使用

    1、创建一个5行4列的表格、&lt;tr&gt;表示一行,&lt;td&gt;表示一列,表示这一列加粗显示。 2、给表格的元素赋值 3、创建Javascript的表单

    js获取表格的行数和列数的方法

    如何使用JavaScript获取一个表格的行数和列数?其实很简单,假设存在如下表格: &lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt;...

    Javascript合并表格中具有相同内容单元格示例

    表格相同内容单元格的合并在以前也有过类似的教程,本文为大家讲解的是使用Javascript合并,具体示例及效果图如下,感兴趣的朋友可以参考下

Global site tag (gtag.js) - Google Analytics