怎么用js设置一个按钮点击按钮可以添加table的行 10

 我来答

3个回答

#热议# 上班途中天气原因受伤算工伤吗？

5208882
2011-04-22 · TA获得超过592个赞

知道小有建树答主

回答量：616

采纳率：0%

帮助的人：709万

我也去答题访问个人页

关注

展开全部

附1：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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>

追问

可以写的简单一些吗？我就是想设置一个按钮能添加table中的一行！或者删除一行的。谢谢啦！

参考资料：动态生成Table的行、列以及删除等http://51weidi.com/html/2455.html

已赞过 已踩过<

评论收起

北京月之暗面科技有限公司

广告2024-12-01

Kimi 提供多功能支持，效率提升看得见!

kimi.moonshot.cn

青鸟中关村专家
推荐于2018-03-13 · 知道合伙人软件行家

青鸟中关村专家
知道合伙人软件行家

采纳数：1734 获赞数：8440

就职于北大青鸟中关村，自2004年踏入北大青鸟这个行业，已经有11年工作经验和8年的培训经验，寓教于乐

向TA提问私信TA

关注

展开全部

html代码：
<table  border="1" >
    <tr>
        <th>编号</th>
        <th>姓名</th>
    </tr>
    <tbody id="mybody">
        <tr>
            <td>1001</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>李四</td>
        </tr>
    </tbody>
</table>
<button id="btnAdd" value="添加新行"></button>

jQuery代码：
<script type="text/javascript src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript>
    $(function(){
        //按钮点击事件
        $("#btnAdd").click(function(){
            //接收用户输入的列数据
            var id=prompt("请输入学员编号：");
            var name=prompt("请输入学员姓名：");
            //构建新行
            var newRow="<tr><td>"+id+"</td><td>"+name+"</td></tr>";
            //为表格追加新行
            $("#mybody").append(newRow);
        });
    });
</script>

本回答被网友采纳

已赞过 已踩过<

评论收起

生活he家
2015-05-21 · 一个属于大家的搬运工

生活he家

采纳数：1536 获赞数：6828

向TA提问私信TA

关注

展开全部

js设置一个按钮点击按钮可以添加table的行：
1、你先要根据table的ID获取到table实例
2、当单机按钮的时候，创建一个table行，然后添加到已经获取到的table中即可

具体可参考：
http://blog.csdn.net/adsdassadfasdfasdf/article/details/6047927

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

2023javascript学习每天免费网上学习javascript学习

免费网上学习javascript学习，国内讲师机构专业授课，适合从基础学习，挑战从入门到熟练运用，海量javascript学习学习能力快速提升优质作品随手呈现

www.huke88.com广告

Diffshop-全球电商独立站与社媒广告数据监控及选品

Diffshop店湖是一款全球电商独立站一站式数据监控及选品工具，趋势数据、爆品数据全覆盖，多功能板块帮助卖家进行竞争对手分析、选品、SEO、Listing及广告投放优化

www.diffshop.cn广告

javascript学习-全方位讲解，覆盖9大类面试问题

coding.imooc.com

怎么用js设置一个按钮点击按钮可以添加table的行 10

您可能关注的内容

其他类似问题

为你推荐：