表格插入行与删除行示例

最新推荐文章于 2019-02-23 10:42:09 发布
最新推荐文章于 2019-02-23 10:42:09 发布
阅读量132 收藏
点赞数
分类专栏： J2EE 文章标签： JavaScript HTML ViewUI 
<html>
 <head>
  <title>表格插入行与删除行示例</title>
  
  <script type="text/javascript">
   //参数列表[表格Id,复制行的索引,标题行数,表单Id]
   function clickInsert(inputTable,rowId,titleRow,inputForm){
    var oForm=document.getElementById(inputForm);
    var oTable=document.getElementById(inputTable);
    var obj =window.event.srcElement;
    var oTd = obj.parentElement;
    var oTr = oTd.parentElement;
    var oRow = oTr.rowIndex;
    var oTr1 = oTable.insertRow(oRow+1);
    var oCells = oTr.cells;
    for(i=0;i<oCells.length;i++){
     var cell = oCells[i].innerHTML;
     var cell1 = oTr1.insertCell(i);
     cell1.innerHTML=cell;
    }
    oForm.flag[oRow+1-titleRow].value="1";
    //alert(oForm.flag[oRow+1-titleRow].value="1");
   }
   
   
   //参数列表[表格Id,标题行数,表单Id]
   function clickDelete(inputTable,titleRow,inputForm){
    var oForm=document.getElementById(inputForm);
    var oTable=document.getElementById(inputTable);
    var obj =window.event.srcElement;
    var oTd = obj.parentElement;
    var oTr = oTd.parentElement;
    var oRow = oTr.rowIndex;
                oTr.style.display="none";
    oForm.flag[oRow-titleRow].value="2";
    // alert(oForm.flag[oRow-titleRow].value);
   }
 
   function submitForm(){
    var flags= inputForm.flag;
    for(i=0;i<flags.length;i++){
     alert(flags[i].value);
    }
   }
  </script>
 </head>
 <body>
  <form action="" name="inputForm" id="inputForm">
   <table id="inputTable" width="50%" align="center" border="1" cellpadding="0"
    cellspacing="0">
    <tr>
     <td>
      学生
     </td>
     <td>
      课程
     </td>
     <td>
      &nbsp;
     </td>
     <td>
      &nbsp;
     </td>
    </tr>
    <tr style="display: none;">
     <td>
      <input type="hidden" name="flag" id="flag" value="-1" />
      <select id="studentId">
       <option value="01">
        张三
       </option>
       <option value="02">
        李四
       </option>
      </select>
     </td>
     <td>
      <select id="courseId">
       <option value="01">
        英语
       </option>
       <option value="02">
        数学
       </option>
      </select>
     </td>
     <td>
      <input type="button" name="insertButton" value="新增" />
     </td>
     <td>
      <input type="button" name="deleteButton" value="删除" />
     </td>
    </tr>
    <tr>
     <td>
      <input type="hidden" name="flag" id="flag" value="1" />
      <select id="studentId">
       <option value="01">
        张三
       </option>
       <option value="02">
        李四
       </option>
      </select>
     </td>
     <td>
      <select id="courseId">
       <option value="01">
        英语
       </option>
       <option value="02">
        数学
       </option>
      </select>
     </td>
     <td>
      <input type="button" name="insertButton" value="新增"
       οnclick="clickInsert('inputTable',1,1,'inputForm')" />
     </td>
     <td>
      <input type="button" name="deleteButton" value="删除"
       οnclick="clickDelete('inputTable',1,'inputForm')" />
     </td>
    </tr>
   </table>
    <br />
    <center><input type="button" name="submitButton" value="提交" οnclick="submitForm()" /></center>
  </form>
 </body>
</html>

 

pjb5188
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超级简单Table表格添加,删除行
Love丶兰的博客
08-18 9978
Table表格添加,删除行
js 操作表格动态添加和删除行
03-30
js 操作表格动态添加和删除行
js动态添加表格数据使用insertRow和insertCell实现
12-03
效果图: 代码: js动态添加表格数据_2.html 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> [removed] var mailArr = [ { “title”: “一个c#问题”, “name
table表格每一行增加和删除功能，增加是指在当前行后面，删除是删除当前行
Christine
06-06 3141
function insertAfter(newElement,targetElement){    var parent = targetElement.parentNode;    if(parent.lastChild == targetElement){        parent.appendChild(newElement);    }else{        parent.inser...
js简单的表格添加行和删除行操作.
怀揣梦想,永不止步.
03-30 3823
//创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $("#addrow").bind("click",function(){ // 取得table var
js简单的表格添加行和删除行操作示例
12-10
总结来说，这个示例演示了如何利用jQuery在JavaScript中动态地操作HTML表格，包括添加新行（通过创建`<tr>`和`<td>`元素并添加到表格中）以及删除行（通过选择器选取并移除特定行）。这些基本操作在构建交互式Web...
C# windows datagridview表格行上下拖动示例
03-29
`DragEnter`和`DragOver`事件处理拖放过程中行的插入和删除，确保行在正确的位置上。 此外，我们还需要在`MainForm_Load`事件中禁用自动调整行高度的功能，因为这可能会影响行拖动的视觉效果： ```csharp private ...
JS/jQuery实现超简单的Table表格添加,删除行功能示例
10-16
在网页开发中，数据展示经常使用到表格（Table）元素，而动态地添加或删除表格行是常见的交互功能。本文将详细介绍如何使用JavaScript和jQuery来实现这个功能。 首先，我们来看一个基本的HTML结构，包含一个表格...
Layui表格添加行删除保存代码
06-24
在“Layui表格添加行删除保存代码”这个主题中，我们将深入探讨如何利用Layui实现表格的动态操作，包括添加、删除和保存数据。 1. **Layui表格基础** Layui的表格组件提供了多种样式和功能，可以用于展示静态或...
jQuery实现表格行和列的动态添加与删除方法【测试可用】
10-21
本文将详细讲解如何使用jQuery实现表格行和列的动态添加与删除功能，这对于创建交互式数据展示页面至关重要。 首先，我们需要一个基本的HTML结构来承载表格。下面的代码展示了这样一个表格： ```html 序号 (1...
【javascript】Dom操作 表格的添加行，删除行，修改行，
口袋里的小龙的专栏
07-25 4180
Dom操作 表格的添加行，删除行，修改行
jquery操作表格(添加/删除行、添加/删除列)
热门推荐
崇尚狼性的专栏
09-21 1万+
jquery操作表格测试 function del(_id){ $("#testTable .tr_"+_id).html(''); var tableTr = $("#testTable .tr_"+_id).hide(); } function addRow()
在表格中添加行和删除行
程序羊的博客
02-23 2566
在我们刚接触MVC项目的时候，遇见的表格几乎都是固定的，不可以编辑，也不支持任意添加行和删除行，经常使用的bootstrap的人都知道，目前bootstrap表格都是固定的行数或者是根据数据的数量来决定的，如果需要添加行或者删除行，那就有点费劲，不过现在的layui中可以实现这种操作，表格内都是可以编辑的，也就是说，数据除了可以在表格中查询出来，也可以在表格中编辑录入了。但是我们除了这种插件外，还...
js如何实现动态的在表格中添加和删除行？（两种方法）
weixin_34342992的博客
05-28 686
js如何实现动态的在表格中添加和删除行？（两种方法） 一、总结 1、table元素有属性和一些方法（js使用） 方法一：添加可通过在table的innerHTML属性中添加tr和td来实现 tab.innerHTML+='&lt;tr style="background: green"&gt;&lt;td&gt;新增01&lt;/td&gt;&lt;td&gt;新增02&lt;/td&gt...
用js 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格
Sunqlive的博客
08-29 7597
动态进行创建列表，点击按钮时，动态创建一个两行三列的表格
vue 实现可以合并拆分插入行和列的表格
最新发布
04-04
以下是一个可以合并拆分插入行和列的表格的 Vue 实现示例： ```html <th></th> <th v-for="col in cols">{{ col }} (row, rowIndex) in rows" :key="rowIndex"> <td>{{ row }} (col, colIndex) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值