怎么用js设置一个按钮点击按钮可以添加table的行
发布网友
发布时间：2022-04-23 08:34
我来回答
共3个回答
热心网友
时间：2022-04-23 10:03
附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
热心网友
时间：2022-04-23 11:21
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>
热心网友
时间：2022-04-23 12:56
js设置一个按钮点击按钮可以添加table的行：
1、你先要根据table的ID获取到table实例
2、当单机按钮的时候，创建一个table行，然后添加到已经获取到的table中即可
具体可参考：
http://blog.csdn.net/adsdassadfasdfasdf/article/details/6047927
怎么用js设置一个按钮点击按钮可以添加table的行
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){ //删除...
按钮图标生成
上海数都信息科技有限公司是一家科技型的设计公司，团队深耕企业品牌设计服务已有十余年，已助力多家企业塑造其品牌形象及体验，服务内容含：LOGO设计/VI设计/产品包装设计/导视店面门头及空间设计，吉祥物设计/海报设计等。 我们的目标是帮助小...
用原生JS脚本如何为Table添加行?
先看下初始的table，就是二行数据（二个tr), table id="tbl" class="table table-bordered" tr td1/td tdJS/td tdjs/td /tr tr td2/td tdJS2/td tdJS2/td /tr /table 添加一个按钮，用来点击添加新的table行， input type="button" class="bt...
js中点击按钮时自动增加一行
直接上代码：<input type="button" value="增加" id="addTable"/><input type="button" value="删除" id="deleteTable"/><table id="table1"></table>$(document).ready(function(){ $("#addTable").click(function(){ var tr="<tr><td><input type=\"checkbox\" name=\"che...
js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息
1、首先开始新建html文件。2、然后创建一个三行三列的表格。3、接下来开始创建js函数。4、接下来开始进行定义变量获取行。5、然后就将函数加在按钮上。6、就可以看到预览效果如图。7、最后点击第二个按钮删除 第二行。
js写一个的表格,通过点击按钮给表格增加一行
用jquery写比较方便点。答案完善了一下，代码如下。其实这样有bug，但是比较容易修改，只要完善一下function addtab() 就行。<html><head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <script> function addtab(){ var...
js如何实现点击新增按钮之后自动增加一行,最多增加四行
利用table的head or footer <table><tbody></tbody><tfoot><tr> <td></td></tr></tfoot></table>javascript时，复制 table.tfoot.tr 即可。删除时，删除tbodies.tr即可。
用js实现点击按钮在html中增加一行内容,问题见详细!
<tr> <td class="tableleft">标题</td> <td> <input name="title" type="text" id="title" style="width:150px;vertical-align:middle;" maxlength="40" > <lable>文件名</lable> <input name="filename" type="text" id="filename" style="width:150px;vertical-align...
js增加按钮实现增加一行求帮助
首先给‘增加项目’按钮绑定一个点击事件；写一个函数，增加里面 的td即可；举个小栗子：<style>div{width: 300px; height: 100px; background: red;}</style><input type="button" id="btn" /><div></div><script>var btn=document.getElementById('btn');var div=document.getElementsBy...
怎样通过按钮把text文本框里边的值传到table表格里边,而且点击一次按钮...
说一下思路吧。首先创建一个trNode，let trNode = createElement("tr");然后文本框里面的值你是能拿到的，拿到文本框的值以后将他拼一下，然后放到tr中 trNode.innerHTML = "<td>商品名</td><td>单价</td>..."这样的形式，最后通过appendChild方法将这个trNode插入到table / tbody中 ...
JS 按钮点击增加一行多单元格表格问题请教
<input type="button" id="btn1" value="添加"/> <table id="tb1" border="1px" width="300px"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> <tbody> <tr> <td>1</td> <td>李四</td> <td>23</td> </tr> <tr> <td>2</td> <td>王五</td> <td>24</...
