使用jquery实现table表格的动态添加行和列

<table class="table" border="1px" cellspacing="0" cellpadding="0" width="300"><thead><tr><td>标题一</td><td>标题二</td><td>标题三</td></tr></thead><tbody><tr><td><select style="width:120px"><option value="1">1</option><option value="2">2</option></select></td><td><select style="width:120px"><option value="1">1</option><option value="2">2</option></select></td><td><select style="width:120px"><option value="1">1</option><option value="2">2</option></select></td></tr></tbody></table><input type="button" value="添加行" class="addRow" /><input type="button" value="添加列" class="addRol" /><input type="button" value="删除行" class="delRow" /><input type="button" value="删除列" class="delRol" /><script>$(document).ready(function () {//添加行$(".addRow").click(function () {var row1 = '<tr class="trRow">' +'<td>' +'<select style="width:120px"><option value="1">1</option><option value="2">2</option></select>' +'</td>'var row2 = ''var rowLength = $(".table>thead>tr").children().length - 1if (rowLength > 0) {for (var i = 0; i < rowLength; i++) {row2 = row2 + '<td><select style="width:120px"><option value="1">1</option><option value="2">2</option></select></td>'}}var row3 = '</tr>'var resultRow = row1 + row2 + row3$(".table>tbody").append(resultRow)//删除行$(".delRow").click(function (e) {$(".trRow").remove()})})//添加列$(".addRol").click(function () {console.log()var rol1 = '<th class="tdRol"><span></span>' + '<input style="width:120px" type="text"/>' + '</th>'$(".table>thead>tr").eq(0).append(rol1)var rol2 = '<td class="tdRol"><select style="width:120px"><option value="1">1</option><option value="2">2</option></select></td>'$(".table>tbody>tr").append(rol2)})//删除列$(".delRol").click(function () {$(".tdRol").remove()})})</script>

使用jquery实现table表格的动态添加行和列相关推荐

element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
JS给table动态添加行和列
效果图: input为动态添加 <botton onclick="AddTableCell()">添加一列</botton><table id=&qu ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
JavaScript学习（六）——表格的动态添加与删除
JavaScript学习(六)--表格的动态添加与删除基本页面首先是去创建一个基本页面,上面有一个表格来展示信息 <div><input id="id" ty ...
【Jquery】Jquery操作table表格详细说明
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $ ...
原生的HTML Table表格实现表头添加斜杠
原生的HTML Table表格实现表头添加斜杠其实就是实现类似的这样一个功能,但是呢,方式很多,有的要固定长宽,有的要固定大小,有的要写JS,有的要用动画,很费劲,然后从网上找了一个demo,稍微改 ...
html页面forEach用法,jQuery教程之使用模板动态添加html元素，相当于jstl里的foreach...
本篇文章探讨了jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.开发的时候有时候要循 ...
用html向表格插入新行,js向table表格中插入添加新行和选择删除行
js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com #tab{ width:50%; } #tab td{ height:2em; text-ali ...
jQuery实现table表格中行数据上下拖拽功能
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({cursor: "move",axis: "y&quo ...

使用jquery实现table表格的动态添加行和列

使用jquery实现table表格的动态添加行和列相关推荐

最新文章

热门文章