js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）

最新推荐文章于 2022-04-13 15:08:41 发布

hongshan50

最新推荐文章于 2022-04-13 15:08:41 发布

阅读量1.9w

点赞数

分类专栏： html+javascript 文章标签： button function border javascript table generator

本文链接：https://blog.csdn.net/hongshan50/article/details/5599776

版权

html+javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

*****************************************************************
js动态添加表的列,并在列中添加控件的方法

<html>
<head>
<title>添加行</title>
<script language="JavaScript">
function addrows()
{
var table=document.getElementById("t1");
var row;
row=table.insertRow();
var cell = row.insertCell(0);
var e = document.createElement("<input id=/"kjmc/" type=/"text/"></input>");
cell.appendChild(document.createTextNode("添加的内容："));
cell.appendChild(e);
}
</script>
</head>
<body>
<form>
<input type="button" οnclick="addrows()" value="添加一行">
</form>
<table id="t1" border="1">
</table>
<body>
</html>

******************************************************************
js在指定位置添加控件的方法
方法一：
<html>
<head>
<title>添加行</title>
<script language="JavaScript">
function addElement()
{
var cell=document.getElementById("22");
var e = document.createElement("<input id=/"kjmc/" type=/"text/"></input>");
cell.appendChild(document.createTextNode("添加的内容："));
cell.appendChild(e);
}
</script>
</head>
<body>
<form>
  <input type="button" οnclick="addElement()" value="添加控件到22">
</form>
<table id="t1" border="5">
<tr>
  <td width="200" height="100">11</td>
  <td width="200" height="100">12</td>
</tr>
<tr>
  <td width="200" height="100">21</td>
  <td width="200" height="100" id="22">22</td>
</tr>
</table>
<body>
</html>
方法二：(转)
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<button id="b1" οnclick="f1()">add new textbox</button>
</body>
</html>
<script type="text/javascript">
function f1()
{
   var _t = document.getElementById("t1");
   var _i = document.createElement("input");
   _i.type = "text";
   _i.value = "i am a new textbox";
   _t.rows[1].cells[1].appendChild(_i);
}
</script>

*****************************************************************

js找到表格中的行号，删除该行的方法（转）

<html>
<head>
<title>1</title>
<script>
//得到行对象
function getRowObj(obj)
{
   var i = 0;
   while(obj.tagName.toLowerCase() != "tr"){
    obj = obj.parentNode;
    if(obj.tagName.toLowerCase() == "table")
return null;
   }
   return obj;
}

//根据得到的行对象得到所在的行数
function getRowNo(obj){
   var trObj = getRowObj(obj);
   var trArr = trObj.parentNode.children;
for(var trNo= 0; trNo < trArr.length; trNo++){
if(trObj == trObj.parentNode.children[trNo]){
    alert(trNo+1);
}
}
}

//删除行
function delRow(obj){
    var tr = this.getRowObj(obj);
   if(tr != null){
    tr.parentNode.removeChild(tr);
   }else{
    throw new Error("the given object is not contained by the table");
   }
}
</script>
</head>

<body>
<table border = "1">
<tr>
<td>A<input type="button" value="A" οnclick="getRowNo(this)">getRowNo<td>
</tr>
<tr>
<td>B<input type="button" value="B" οnclick="delRow(this)">delRow<td>
</tr>
<tr>
<td>C<input type="button" value="C" οnclick="getRowNo(this)">getRowNo</td>
</tr>
<tr>
<td>D<input type="button" value="D" οnclick="getRowNo(this)">getRowNo</td>
</tr>
</table>
</body>
<html>

hongshan50

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 对表格的动态操作（动态添加行，删除该行，在指定位置添加控件）

*****************************************************************js动态添加表的列,并在列中添加控件的方法添加行function addrows(){ var table=document.getElementById("t1"); var row; row=table.insertRow(); var cell = row.i
复制链接

扫一扫