利用js动态添加删除table行的示例代码,示例代码

我们知道appendChild和insertBefore都有插入节点的功能。但在应用上,这两者之间还是有一些区别的。

如下所示:

frame目前还是比较流行的,许多地方都通过它来实现特殊的情况。比如说传统的上传、select在ie6下、代理、跨域等等。今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面。

比如我们要在下面这个div中插入一个子节点P时:

复制代码 代码如下:

复制代码 代码如下:

<div id=”test”><p
id=”x1″>Node</p><p>Node</p></div>

//动态添加行 function addRow(){
   var table = document.getElementById(“tableID”);
   var newRow = table.insertRow(); //创建新行
   var newCell1 = newRow.insertCell(); //创建新单元格
   newCell.innerHTML = “”; //单元格内的内容
   newCell.setAttribute(“align”,”center”); //设置位置
}

<iframe src=”a.php” id=”aa”></iframe>
<iframe src=”b.php” id=”bb”></iframe>
<input type=”button” id=”read-aa” value=”读取iframe #aa”>
<input type=”button” id=”write-aa” value=”写入iframe #aa”>

我们可以这样写(测试某种情况时请将另外一种注释):

//动态删除行 function deleteRow(){
   var rowIndex =
event.srcElement.parentElement.parentElement.rowIndex;
   var styles = document.getElementById(“tableID”);
   styles.deleteRow(rowIndex);
}

复制代码 代码如下:

复制代码 代码如下:

<html>
<head>
<title></title>
</head>
<body>
<table id=”testTbl” border=1>
<tr>
<td>
产品名称
</td>
<td>
产品数量
</td>
<td>
产品单价
</td>
</tr>
<tr>
<td>
<select name=”a”>
   <option value=”电子”>电子</option>
   <option value=”电器”>电器</option>
</select></td>
<td>
    <input type=”text” name=”b”>
     </td>
<td>
    <input type=”text” name=”c”>
     </td>
</td>
</table>
<input type=”button” name=”Submit2″ value=”添加”
onclick=”addRow()”>
<script>
function addRow(){
//添加行

$(‘#read-aa’).click(function()
{
    var v=$(‘#aa’).contents().find(‘body’).html();
    alert(v);
});
$(‘#write-aa’).click(function()
{

<script type=”text/javascript”>
var oTest = document.getElementById(“test”);
var newNode = document.createElement(“p”);
newNode.innerHTML = “This is a test”;
//测试从这里开始
//appendChild方法:
oTest.appendChild(newNode);
//insertBefore方法:
oTest.insertBefore(newNode,null);
</script>

var newTr = testTbl.insertRow();
//添加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性

   
$(‘#aa’).contents().find(‘div’).append(‘<hr>这是index.php操作aa.php写入的内容’);
});

通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。(如要查看DOM,IE可以通过IE
Developer Toolbar插件来查看,Firefox可以使用Firebug)

newTd0.innerText =
document.all(“a”).options[document.all(“a”).selectedIndex].text;
newTd1.innerText = document.all(“b”).value;
newTd2.innerText = document.all(“c”).value;
newTd3.innerHTML= ‘<input type=”button” name=”del” value=”删除”
onclick=”del(this)”>’;
}
function del(o)
{
var   t=document.getElementById(‘testTbl’);
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>

主要方法是 contents(),读取iframe。

很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

您可能感兴趣的文章:

  • Js实现动态添加删除Table行示例
  • js动态控制table的tr、td增加及删除的具体实现
  • js操作table元素实现表格行列新增、删除技巧总结
  • js实现对table的增加行和删除行的操作方法

2、iframe跨父框架操作iframe

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注