jQuery实现动态操作table行

JQuery 实现动态操作 table 行，供大家参考，具体内容如下

实现效果：可动态实现table添加行和删除行，如下图。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Html动态Table</title>
 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <style>
  table {
   border: 1px solid #e9e9e9;
   border-collapse: collapse;
   border-spacing: 0;
  }

  tr,td {
   border: 1px solid #e9e9e9;
   text-align: center;
  }

  tr {
   height: 20px;
   background-color: #f7f7f7;
   color: #5c6b77;
   font-weight: 600;
  }

  td {
   width: 200px;
  }

  input {
   width: 150px;
  }
 </style>
</head>
<body>

<div style="width: 1000px;height: 250px;overflow-y: auto">
 <table id="dynamicTable">
  <tr>
   <td>列1</td>
   <td>列2</td>
   <td>列3</td>
   <td>列4</td>
   <td>操作</td>
  </tr>
  <tr>
   <td colspan="5"><button onclick="addRow()">添加行</button></td>
  </tr>
 </table>
</div>
<script>
 function addRow() {

  var trArray = $("#dynamicTable").find("tr");
  var thisIndex = trArray.length - 1;

  var addRowHtmlStr = "<tr>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><button onclick='removeRow(" + thisIndex + ")'>删除行</button></td>" +
   "</tr>"
  $("#dynamicTable tr:last").before(addRowHtmlStr);
 }

 function removeRow(index) {
  $("#dynamicTable").find("tr").eq(index).remove();

  // 删除行时需要注意 index 变化问题
  var trArrayNow = $("#dynamicTable").find("tr");
  for(var i = index; i < trArrayNow.length -1; i++) {
   $("#dynamicTable").find("tr").eq(i).find("td").eq(4).remove();
   var htmlStr = "<td><button onclick='removeRow(" + i + ")'>删除行</button></td>"
   $("#dynamicTable").find("tr").eq(i).append(htmlStr)
  }
 }

</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery表格插件datatables用法总结

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格. 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本站下载. 其主要特点如下: 1.自动分页处理 2.即时表格数据过滤 3.数据排序以及数据类型自动检测 4.自动处理列宽度 5.可通过CSS定制样式 6.支持隐藏列 7.易用 8.可扩展性和灵活性 9.国际化 10.动态创建表格 11.免费的 使用方

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • jQuery实现动态添加tr到table的方法

    jQuery实现动态添加tr到table的方法

    本文实例讲述了jQuery实现动态添加tr到table的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co

  • jQuery表格插件datatables用法详解

    jQuery表格插件datatables用法详解

    一.Datatables简介 DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二.如何使用 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我

  • jquery sortable的拖动方法示例详解

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属

  • jquery获取table中的某行全部td的内容方法

    复制代码 代码如下: <table><tr class="PurViewData" id="trid95">    <td>14</td>    <td id="95"><a style="color:#0000CC" href="/PurviewManage/AddPurview?id=95">TopParty优惠</a>

  • jQuery操作表格（table）的常用方法、技巧汇总

    以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){    $(this).children('td').addClass('hover')}, function(){    $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()

  • jquery easyui 结合jsp简单展现table数据示例

    jquery easyui 结合jsp简单展现table数据示例

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

  • jQuery实现获取table表格第一列值的方法

    jQuery实现获取table表格第一列值的方法

    本文实例讲述了jQuery实现获取table表格第一列值的方法.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.or

  • jquery遍历table的tr获取td的值实现方法

    html代码: <tbody id="history_income_list"> <tr> <td align="center"><input type="text" class="input-s input-w input-hs"></td> <td align="center"><input type="text&q

随机推荐