`
keimon
  • 浏览: 75342 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript-表格行-添加,删除

阅读更多

Javascript处理表格行的添加,删除,及重载时新增行的处理;
具体代码如下:

<SCRIPT type=text/javascript src="mdbDataBase.js"></SCRIPT>
<script>
   //添加行;
   function addRow(tabId,rowNum,tdRows,startId,hidId){
    var tab = document.getElementById(tabId);
    var rowNum = document.getElementById(rowNum);
    var tbRows = document.getElementById(tdRows);
    var hidObj = document.getElementById(hidId);
    hidObj.value++;
    var cells = rowNum.getElementsByTagName('td')[0].colSpan;
    var rowIndex = rowNum.rowIndex;
    var tr = tab.insertRow(rowIndex);
    tbRows.rowSpan++;
    var tdId = tab.rows.length*cells + startId
    for(var i=0; i<cells; i++){
      var td = tr.insertCell();
      td.style.border = '1px solid #000';
      td.innerHTML = '<textarea class="textarea1" id='+tdId+' style="width:90%"></textarea>'
      tdId++
    }
   }
  
   //删除行1
   function deleteRow(tabId,rowNum,tdRows,hidId){
    var tab = document.getElementById(tabId);
    var rowNum = document.getElementById(rowNum);
    var tbRows = document.getElementById(tdRows);
    var hidObj = document.getElementById(hidId);
    var rowIndex = rowNum.rowIndex;
    var hidVal = hidObj.value;
    if(hidVal>0){
     tab.deleteRow(rowIndex-1);
     hidObj.value--;
     tbRows.rowSpan--;
    }else{
     alert('无法删除!')
    }
   }
  
   //删除行2
   function deleteRow2(tabId,rowNum,tdRows,hidId){
    var tab = document.getElementById(tabId);
    var rowNum = document.getElementById(rowNum);
    var tbRows = document.getElementById(tdRows);
    var hidObj = document.getElementById(hidId);
    var rowIndex = rowNum.rowIndex;
    var hidVal = hidObj.value;
    if(hidVal>0){
     tab.deleteRow(rowIndex-1);
     hidObj.value--;
    }else{
     alert('无法删除!')
    }
   }
  
  //页面重载时,加载增加的行的数据;
  function loadTableByHiddenValue(arr){
     for(var i=0; i<arr.length; i++){
      var hid = document.getElementById(arr[i]);
      var hid_val = hid.value;
      if(hid_val>0){
       var hid_id = hid.id;
       for(var j=0; j<hid_val; j++){
          var add_id = "add"+hid_id;
          var add_btn = document.getElementById(add_id);
          add_btn.click();
       }
      }
      hid.value=hid_val;
     }
       }
   
</script>
</head>

<body   onload="Show('表格处理数据'),loadTableByHiddenValue(['0017','0018']),Show('表格处理数据')">
<input type="button" value="更新" onclick="update('表格处理数据')" />
<table id='tab' width="60%" border="1">
  <tr>
    <td width="7%">标题</td>
    <td width="16%">标题</td>
    <td width="22%">标题</td>
    <td width="18%">标题</td>
    <td width="20%">标题</td>
    <td width="17%">标题</td>
  </tr>
  <tr>
    <td id="tdRows1" rowspan="3"><p>标</p><p>题</p></td>
    <td>标题</td>
    <td><textarea class='textarea1' id='0016' style="width:80px;" /></textarea>    </td>
    <td><textarea class='textarea1' id='0001' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0002' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0003' style="width:80px;" /></textarea></td>
  </tr>
  <tr>
    <td>标题</td>
    <td><textarea class='textarea1' id='0004' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0005' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0006' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0007' style="width:80px;" /></textarea></td>
  </tr>
 <tr id='rowNum1'>
  <td colSpan=5>
  <input type='hidden' id='0017' value=0 />
  <input type='button' value=' 添  加 ' id='add0017' onClick="addRow('tab','rowNum1','tdRows1',1000,'0017')"/>
  <input type='button' value=' 删  除 ' id='del0017' onClick="deleteRow('tab','rowNum1','tdRows1','0017')"/>
  </td>
 </tr>
  <tr>
    <td id="tdRows2" rowspan="3"><p>标</p><p>题</p></td>
    <td>标题</td>
    <td><textarea class='textarea1' id='0008' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0009' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0010' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0011' style="width:80px;" /></textarea></td>
  </tr>
  <tr>
    <td>标题</td>
    <td><textarea class='textarea1' id='0012' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0013' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0014' style="width:80px;" /></textarea></td>
    <td><textarea class='textarea1' id='0015' style="width:80px;" /></textarea></td>
  </tr>
 <tr id='rowNum2'>
  <td colSpan='5'>
    <input type='hidden' id='0018' value=0 />
    <input type='button' value=' 添  加 ' id='add0018' onClick="addRow('tab','rowNum2','tdRows2',1100,'0018')"/>
    <input type='button' value=' 删  除 ' id='del0018' onClick="deleteRow2('tab','rowNum2','tdRows2','0018')"/>
  </td>
 </tr>
</table>
</body>

0
0
分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    javascript实现表格添加删除等操作

    - **创建新行**:要向表格添加行,首先需要创建一个新的`&lt;tr&gt;`元素,然后创建`&lt;td&gt;`元素并设置其内容。最后,将这些元素添加到表格的`&lt;tbody&gt;`标签内。 - **删除行**:通过获取行的引用(例如,通过点击事件的`...

    纯javascript增加删除表格行

    2. **新增行**:要向表格添加新行,首先需要创建一个`&lt;tr&gt;`元素,然后为该行添加单元格(`&lt;td&gt;`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`&lt;tbody&gt;`元素中。...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JAVASCRIPT自动添加表格

    本篇文章将深入探讨如何使用JavaScript自动添加、删除表格,以及实现窗口居中显示的相关技术。 首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`&lt;table&gt;`元素定义,行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`...

    表格删除线

    "表格删除线"就是这样一个功能,它允许用户在表格中添加删除线,以视觉上标识出已被删除但尚未实际移除的数据行。这样的功能对于版本控制或者协作编辑场景特别有用,因为它提供了明确的修改记录。 首先,让我们来...

    动态表格-添加删除行

    "动态表格-添加删除行"这个主题涉及到的技术主要是JavaScript库AutoTable,它允许开发者在HTML页面上创建功能丰富的表格,并且支持动态操作,如添加和删除行。下面我们将详细探讨AutoTable的使用、动态操作行的方法...

    JavaScript动态操作表格,添加,删除行、列及单元格

    在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`...

    js 添加删除表格

    以下是一个简单的例子,展示如何使用JavaScript添加和删除表格行: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    table--表格的各种操作--增,删,移动,插入到指定位置

    - 在HTML表格中,可以使用JavaScript动态创建新的`&lt;tr&gt;`(行)元素并将其添加到`&lt;tbody&gt;`中。通过DOM操作,如`createElement()`、`appendChild()`或`insertBefore()`,可以在表格的末尾或指定位置插入新行。 - 在...

    js动态表格--行操作

    "js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先,我们需要理解HTML表格的基本结构,包括`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;th&gt;`和`&lt;td&gt;`等元素。`...

    jquery入门之动态表格---动态添加删除一行

    为每一行生成时添加删除按钮: ```javascript function createRow(data1, data2) { var newRow = $("&lt;tr&gt;&lt;td&gt;" + data1 + "&lt;/td&gt;&lt;td&gt;" + data2 + "&lt;/td&gt;&lt;td&gt;删除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;"); return newRow; } ``` 并...

    Layui表格添加行删除保存代码.zip

    本压缩包"layui表格添加行删除保存代码.zip"就是针对这种需求的一个实例,主要展示了如何使用Layui实现表格数据的动态添加、删除和保存功能。下面将详细解释这些功能的实现原理和步骤。 首先,"说明.htm"文件通常会...

    js表格操作,DOM实现数据动态增删查改

    在JavaScript中,我们可以使用`document.createElement()`方法创建新的表格元素,然后使用`appendChild()`将它们添加到页面上。 2. **数据绑定**:数据存储可以采用数组或对象的形式,其中每一项代表表格的一行。...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    javascript动态操作表格

    // 将表格添加到文档的某个位置,如body document.body.appendChild(table); ``` 接下来是删除表格。这通常涉及到找到特定的表格元素并使用`removeChild()`方法移除它们。例如,要删除刚才创建的表格,你可以这样...

    JavaScript操作表格

    本篇内容主要介绍了使用JavaScript进行表格操作的方法,包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术,可以实现更加灵活的...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    jQuery 动态添加或删除表格行

    本文将深入探讨如何使用 jQuery 动态添加和删除表格行,以实现高效且用户友好的数据展示。 首先,理解 HTML 表格的基本结构至关重要。`&lt;table&gt;` 元素用于创建表格,`&lt;tr&gt;` 代表表格行,`&lt;td&gt;` 或 `&lt;th&gt;` 分别表示...

Global site tag (gtag.js) - Google Analytics