JQUERY方法给TABLE动态增加行_IT百科

1、首先输入下方的代码：

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>利用jquery给指定的table添加一行、删除一行</title>

src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script>

2、然后在输入下方的代码：

////////添加一行、删除一行封装方法///////

/**

* 为table指定行添加一行

* tab 表id

* row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行

* trHtml 添加行的html代码

function addTr(tab, row, trHtml){

//获取table最后一行 $("#tab tr:last")

//获取table第一行 $("#tab tr").eq(0)

//获取table倒数第二行 $("#tab tr").eq(-2)

var $tr=$("#"+tab+" tr").eq(row)

if($tr.size()==0){

alert("指定的table id或行数不存在！")

return

}

$tr.after(trHtml)

}

3、然后在输入下方的代码：

function delTr(ckb){

//获取选中的复选框，然后循环遍历删除

var ckbs=$("input[name="+ckb+"]:checked")

if(ckbs.size()==0){

alert("要删除指定行，需选中要删除的行！")

return

}

ckbs.each(function(){

$(this).parent().parent().remove()

})

}

/**

* 全选

* allCkb 全选复选框的id

* items 复选框的name

function allCheck(allCkb, items){

$("#"+allCkb).click(function(){

$('[name='+items+']:checkbox').attr("checked", this.checked )

})

}

////////添加一行、删除一行测试方法///////

$(function(){

//全选

allCheck("allCkb", "ckb")

})

function addTr2(tab, row){

var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/>

</td><td width='30%'>地理</td><td width='30%'>60</td></tr>"

addTr(tab, row, trHtml)

}

function delTr2(){

delTr('ckb')

}

4、然后输入下方的代码：

</script>

</head>

<body>

<table border="1px #ooo" id="tab" cellpadding="0"

cellspacing="0" width="30%">

</tr>

</tr>

</table>

</body>

</html>

5、然后这样就完成了。

<html>

<head>

<title>动态增加、删除table中的tr示例</title>

//添加行函数

function addrow(){

//得到table对象

var mytable = document.getElementById("testtable")

//向table中插入一行

var mytr=mytable.insertRow()

//创建一个新的td对象

var mytd=document.createElement("td")

//创建一个新的<input >对象

var inputtext=document.createElement("<INPUT name='ok'>")

//设置input对象的type属性

inputtext.setAttribute("type","text")

//初始化td中的文本信息

mytd.innerText="输入关键字:"

//向td中加入input对象

mytd.appendChild(inputtext)

//向tr中加入td对象

mytr.appendChild(mytd)

}

//删除行

function deleterow(){

//得到table对象

var mytable = document.getElementById("testtable")

//得到table中的行对象数组

var arr=mytable.rows

if(arr.length==1){

alert("至少存在一行")

}else{

//删除最后一行

arr[arr.length-1].removeNode(true)

}

</script>

</head>

<body>

<h2>table中动态增加、删除行示例</h2>

<table>

<tr>

<td>

<tr><td>输入关键字:<input type="text" name="name"></td></tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

说明：把此代码赋值到一个html文件中就可以直接运行

var dt = new DataTable()

DataRow drr = dt.NewRow()

dt.Rows.InsertAt(drr, h)

这里的h 就是要插入的第几行。

DataTable是一个临时保存数据的网格虚拟表(表示内存中数据的一个表。)。DataTable是ADO dot net 库中的核心对象。它可以被应用在 VB 和 ASP 上。它无须代码就可以简单的绑定数据库。它具有微软风格的用户界面。其他使用DataTable的对象包括DataSet和DataView。

DataTable 表示一个内存内关系数据的表，可以独立创建和使用，也可以由其他 .NET Framework 对象使用，最常见的情况是作为 DataSet 的成员使用。

可以使用相应的 DataTable 构造函数创建 DataTable 对象。可以通过使用 Add 方法将其添加到 DataTable 对象的Tables 集合中，将其添加到 DataSet 中。

也可以通过以下方法创建 DataTable 对象：使用 DataAdapter 对象的 Fill 方法或 FillSchema 方法在 DataSet 中创建，或者使用 DataSet 的 ReadXml、ReadXmlSchema 或InferXmlSchema 方法从预定义的或推断的 XML 架构中创建。请注意，将一个 DataTable 作为成员添加到一个 DataSet 的 Tables 集合中后，不能再将其添加到任何其他 DataSet 的表集合中。

初次创建 DataTable 时，是没有架构（即结构）的。要定义表的架构，必须创建 DataColumn 对象并将其添加到表的Columns 集合中。您也可以为表定义主键列，并且可以创建Constraint 对象并将其添加到表的 Constraints 集合中。在为DataTable 定义了架构之后，可通过将 DataRow 对象添加到表的 Rows 集合中来将数据行添加到表中。

创建 DataTable 时，不需要为 TableName 属性提供值，您可以在其他时间指定该属性，或者将其保留为空。但是，在将一个没有 TableName 值的表添加到 DataSet 中时，该表会得到一个从“Table”（表示 Table0）开始递增的默认名称 Tablen。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/bake/11729722.html

JQUERY方法给TABLE动态增加行

发表评论

评论列表（0条）