js在table中插入行

js在table中插入行,第1张

你可以在每个单元格里放个空格符号,

obj[point].cells(m).innerHTML = " "改为

obj[point].cells(m).innerHTML = "&nbsp"即可

你把&和nbsp之间的空格去掉,放一起在这里显示不出来

附1:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312"/>

<title>动态添加删除表格</title>

<Script Language="Javascript">

var cGetRow=-99999

function AddRow()

{

//添加一行

var newTr = tab1.insertRow()

//添加两列

var newTd0 = newTr.insertCell()

var newTd1 = newTr.insertCell()

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4" on Click="GetRow()">'

newTd1.innerText= '新增加行'

}

function DelRow(iIndex)

{

//删除一行

if(iIndex==-99999)

alert("系统提示:没有选中行号!")

else

tab1.deleteRow(iIndex)

}

function GetRow()

{

//获得行索引

//两个parentElement分别是TD和TR哟,rowIndex是TR的属性

//this.parentElement.parentElement.rowIndex

cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex

}

function ShowRow()

{

//显示行号

alert(cGetRow)

//alert(document.getElementsByTagName("tr").length)

}

</script>

</head>

<body>

<table id="tab1" border=1>

<tr id="tr1">

<td width=6%><input type=checkbox id="box1" on Click="GetRow()"></td>

<td id="a">第一行</td>

</tr>

<tr id="tr2">

<td width=6%><input type=checkbox id="box2" on Click="GetRow()"></td>

<td id="b">第二行</td>

</tr>

<tr id="tr3">

<td width=6%><input type=checkbox id="box3" on Click="GetRow()"></td>

<td id="c">第三行</td>

</tr>

</table>

<input type="submit" name="Submit" value="AddRow" on click="javascript :AddRow()">

<input type="submit" name="Submit" value="DelRow" on click="javascript :DelRow(cGetRow)">

<input type="submit" name="Submit" value="ShowRow" on click="javascript :ShowRow()">

</body>

</html>

附 2:

<HTML>

<HEAD>

<script LANGUAGE="JAVASCRIPT">

iIndex = 0//试验一下加了int类型定义后如何???

var i= 0

function showIndex(){

alert(iIndex)

}

function getIndex(){

iIndex = event.srcElement.parentElement.parentElement.rowIndex

return iIndex

}

function insertRow(iPos){

var otr=myTable.insertRow(i)

var ocell=otr.insertCell(0)

ocell.innerHTML="<input type=file name=aa >"

var ocell=otr.insertCell(1)

// ocell.innerText="bb"

ocell.innerHTML=" <input type=button onclick=deleteRow(getIndex()) value='删除"+ i +"'>"

i++

}

function deleteRow(iPos){

document.all.myTable.deleteRow(iPos)

i--

}

</SCRIPT>

</HEAD>

<BODY>

<table id="myTable" border=1 width=600 >

</table>

<form>

<input type=button onclick="alert(iIndex)" value="show Index">

<input type=button onclick="insertRow(0)" value="插入行">

</form>

</BODY>

</HTML>

附 3:

<script>

function deleteRow (tableID, rowIndex) {

var table =document.all[tableID]

table.deleteRow(rowIndex)

}

</script>

<table id=mxh border=1>

<tr>

<td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>

</tr>

<tr>

<td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>

</tr>

<tr>

<td>第3行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>

</tr>

<tr>

<td>第4行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">删除本行</td>

</tr>

</table>

<HTML>

<HEAD>

<script LANGUAGE="JAVASCRIPT">

iIndex = 0//试验一下加了int类型定义后如何???

function showIndex(){

alert(iIndex)

}

function getIndex(){

iIndex = event.srcElement.parentElement.rowIndex

}

function insertRow(iPos){

var otr=myTable.insertRow(iPos)

var ocell=otr.insertCell(0)

ocell.innerText="aa"

var ocell=otr.insertCell(1)

ocell.innerText="bb"

}

function deleteRow(iPos){

document.all.myTable.deleteRow(iPos)

}

</SCRIPT>

</HEAD>

<BODY>

<table id="myTable" border=1>

<tr onclick="getIndex()">

<td>1</td>

<td>2</td>

</tr>

<tr onclick="getIndex()">

<td>1</td>

<td>2</td>

</tr>

</table>

<form>

<input type=button onclick="alert(iIndex)" value="show Index">

<input type=button onclick="insertRow(iIndex)" value="插入行">

<input type=button onclick="deleteRow(iIndex)" value="删除行">

</form>

</BODY>

</HTML>

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

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

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

<html>

<head>

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

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script type="text/javascript"

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

<script type="text/javascript">

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 align="center">

<td width="30%"><input id="allCkb" type="checkbox"/></td>

<td width="30%">科目</td>

<td width="30%">成绩</td>

</tr>

<tr align="center">

<td width="30%"></td>

<td width="30%">语文</td>

<td width="30%">80</td>

</tr>

</table>

<input type="button" onclick="addTr2('tab', -1)" value="添加">

<input type="button" onclick="delTr2()" value="删除">

</body>

</html>

5、然后这样就完成了。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7974854.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存
    {label}{label}{label}