`

Jquery 动态增加和删除行列

 
阅读更多
function addSortTr(){
  var attrValue=trim(document.getElementById("attrValue").value);
  var valueNames=document.getElementsByName("valueNames");
    if (null == attrValue || trim(attrValue).length == 0) {
        alert("属性值名称不能为空!");
        return false;
      }
    if(attrValue.length>40){
   alert("属性组名称超过最大文字长度,不能添加!");
   return false;
   } 
    for(var i=1;i<valueNames.length;i++){
    if(valueNames[i].value==attrValue){
     alert("属性值不能重复!");
    document.getElementById("attrValue").value="";
    return false;
    }
      } 
var table=$("#sortTable");
var tr=$("#_sortTr").clone();
tr.show();
table.append(tr);
tr.children().children("input:hidden").each(function(){
$(this).val('');
});
document.getElementById("attrValue").value="";
return false;
}

  <tr>
    <td width="166">&nbsp;</td>
    <td width="177">&nbsp;
    <table id="sortTable" border="0" cellpadding="0" cellspacing="1">
     <tr id="_sortTr" align="right"  style="display:none;">
   <td>
   <input type="text" id="newattrValue" name="valueNames" size=15/></td>
<td>
<td>
<input type="button" onclick="remove(this)" value="删除" />
</td>
</td>
分享到:
评论

相关推荐

    使用jquery给指定的table动态添加一行、删除一行

    支持动态删除一行。 先演示结果,如中意了在好好研究代码。 1、原始界面如下: 2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图: 3、删除一行,如要删除指定行,先要选中...

    jquery数据统计饼图+表格动态效果现实

    5. **动态效果**: 这个demo中的动态效果可能包括数据的实时更新、图表的动态过渡(如添加、删除或改变数据时饼图的平滑动画)以及用户交互响应(如点击饼图切片后高亮显示相关数据行)。这些效果可以通过jQuery的...

    webwork 中table动态增加行列

    3. 动态添加和删除按钮:通过JavaScript或jQuery来处理用户的点击事件,发送AJAX请求调用`addRow()`或`deleteRow()`方法,并在页面上实时更新表格。 4. 需要注意的是,为了实现动态增删,前端需要与后端进行交互,...

    基于Bootstrap使用jQuery实现简单可按钮编辑一行多个表格

    在网页设计和开发中,Bootstrap框架和jQuery库的结合使用能大大提高开发效率并提供美观的用户界面。本项目“基于Bootstrap使用jQuery实现简单可按钮编辑一行多个表格”旨在为开发者提供一个易于实施、功能直观的表格...

    jquery实现的类似excel功能的表格

    现在可以实现,添加或附加行列,删除行和列。简单的合并行或列。现在想将其添加到右键功能上。另外可以像excel那样拖拉选择单元格。还有合并行和列也只能实现简单的行和列的合并。不能交叉合并的。目前的问题...

    jQuery 仿问卷星 自定义修改问卷调查表单代码

    实现矩阵题通常需要嵌套的表格结构,结合jQuery,用户可以选择行和列,动态添加或删除行列,以适应不同的需求。 **7. CSS和JavaScript文件** 在压缩包中,`index.html`是主页面,`images`目录包含所需的图片资源,`...

    Excel表格功能jQuery插件.zip

    首先,此插件的核心特性是列宽和行高的动态调整。用户可以通过拖动来改变表格中列的宽度和行的高度,使得数据展示更加灵活,适应不同用户的需求和视觉偏好。这种灵活性对于那些需要频繁查看和比较大量数据的用户来说...

    Javascript动态创建表格及删除行列的方法

    在JavaScript中,动态创建表格和删除行列是常见的需求,尤其在网页交互和数据展示中。以下将详细讲解如何实现这些功能。 首先,我们来看如何动态创建表格。在HTML中,表格由`&lt;table&gt;`元素定义,包含`&lt;tr&gt;`(行)和`...

    jquery.sheet

    - **行列操作**:添加、删除、移动行列,以及调整它们的宽度和高度。 - **排序与过滤**:对数据进行排序,根据特定条件筛选数据。 - **数据绑定**:可以与后端数据库或其他数据源进行双向数据绑定,实现数据的实时...

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

    单元格的添加和删除与行和列类似,使用`insertCell()`和`deleteCell()`方法。但通常情况下,我们不会单独操作单元格,而是作为添加或删除行和列的一部分进行操作。 7. **事件监听** 为了实现动态操作,我们需要为...

    jquery-handsontable-master

    2. **行列操作**:通过API可以添加、删除和移动行或列,如`insertRow()`、`removeRow()`等。 3. **导出导入数据**:Handsontable支持CSV、JSON等多种格式的数据导入和导出,方便数据交换。 4. **响应式设计**:...

    table表单增删行列例子

    当我们需要创建交互式的表格,比如允许用户动态添加或删除行和列时,就需要利用JavaScript或者其他前端框架来实现这样的功能。本文将深入探讨如何在HTML中实现表格的动态增删行列。 一、HTML基础 在HTML中,`...

    移动表格(使用了jquery)

    同时,jQuery提供了一系列方法,如`.append()`、`.prepend()`和`.insertAfter()`等,用于在DOM树中添加、删除或移动元素,实现表格行列的动态调整。 2. **事件绑定**:在移动表格中,通常需要监听鼠标事件,如`...

    jQuery简单仿Excel表格功能插件.zip

    jQuery,作为一款轻量级的JavaScript库,提供了丰富的API和插件资源,使得这些功能的实现变得相对简单。本篇将介绍一个基于jQuery的仿Excel表格功能插件,它可以帮助开发者快速构建具有Excel特色的交互式表格。 ...

    jquery Handsontable插件

    4. **行列操作**:允许动态添加、删除和移动行或列,以适应不断变化的数据需求。 5. **数据验证**:内置数据验证机制,可以设定规则限制输入,例如数字范围、日期格式等。 6. **富文本编辑**:支持在单元格内插入...

    jQuery实现的网页版excel表格可编辑创建特效源码.zip

    2. **行列增删**:用户可以添加或删除表格的行和列。这需要动态调整表格结构,并保持数据的一致性。 3. **公式支持**:虽然不是所有网页版Excel都会实现,但高级版本可能包含类似Excel的计算公式。这需要解析和执行...

    动态改变表格的行和列

    5. **动态交互:** 为了实现用户交互,如点击按钮增加或删除行列,可以监听按钮的`click`事件,并在回调函数中执行上述操作。确保为操作添加适当的验证和错误处理,以防止非法索引导致的问题。 ```javascript ...

    基于Bootstrap使用jQuery实现简单可编辑表格

    editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列;(这里的操作包括 编辑当前行、在当前行下...

    可写的动态表格

    标题中的“可写的动态表格”指的是在网页上能够实时编辑的表格组件,它允许用户不仅查看数据,还能直接在表格中进行添加、修改和删除等操作。这种技术在Web应用中非常常见,尤其是在数据管理、报表展示和协作工具中...

    jqGrid_各种参数_详解

    jqGrid 需要 jQuery 和 jQuery UI 的支持。 2. jqGrid 的皮肤 从 3.5 版本开始,jqGrid 完全支持 jQuery UI 的主题。用户可以从 jQuery UI 官方网站下载所需的主题,也可以编辑自己的主题。jqGrid 也不需要把所有...

Global site tag (gtag.js) - Google Analytics