javascript怎么增减iframe中的table行
日期：2014-05-16 浏览次数：20372 次
javascript如何增减iframe中的table行
求大侠给个实例，谢谢
------解决方案--------------------
可以参考这里：
http://www.w3schools.com/htmldom/dom_obj_table.asp
示例可以参考这里：
http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_deleterow
http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow
------解决方案--------------------
IE 6 下测试可用，L@_@K
// table page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> table page </title>
</head>
<body>
<table id= "tabTarget " border= "1 ">
<thead>
<th> col01 </th> <th> col02 </th>
</thead>
<tbody>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 34 </td> <td> 56 </td>
</tr>
<tr>
<td> 789 </td> <td> 012 </td>
</tr>
</tbody>
</table>
</body>
</html>
// iframe page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> iframe page </title>
</head>
<body>
<iframe id= "ifrtalbe " frameborder= "1 " scrolling= "yes " src= "tablepage.html "> </iframe>
<input type= "button " id= "btnAdd " value= "Add row to end ">
<input type= "button " id= "btnRemove " value= "Remove row from end ">
</body>
<script language= "JavaScript ">
<!--
var oAdd = document.getElementById( "btnAdd ");
var oRemove = document.getElementById( "btnRemove ");
function getTBody()
{
var oIframeDoc = document.frames( "ifrTalbe ").document;
var oTable = oIframeDoc.getElementById( "tabTarget ");
return oTable.getElementsByTagName( "tbody ")[0];
}
oAdd.onclick = function() {
var oTBody = getTBody();
if (oTBody)
{
var newRow = oTBody.lastChild.cloneNode(true)
for (var i=0; i <newRow.childNodes.length; i++)
{
newRow.childNodes(i).innerHTML = " ";
}
oTBody.appendChild(newRow);
}
};
oRemove.onclick = function() {
var oTBody = getTBody();
if (oTBody.rows.length > 1)
{
oTBody.deleteRow();
}
else
{
alert( "Stop! Are you crazy? ");
}
};
//-->
</script>
</html>
求大侠给个实例，谢谢
------解决方案--------------------
可以参考这里：
http://www.w3schools.com/htmldom/dom_obj_table.asp
示例可以参考这里：
http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_deleterow
http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow
------解决方案--------------------
IE 6 下测试可用，L@_@K
// table page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> table page </title>
</head>
<body>
<table id= "tabTarget " border= "1 ">
<thead>
<th> col01 </th> <th> col02 </th>
</thead>
<tbody>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 34 </td> <td> 56 </td>
</tr>
<tr>
<td> 789 </td> <td> 012 </td>
</tr>
</tbody>
</table>
</body>
</html>
// iframe page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<html>
<head>
<title> iframe page </title>
</head>
<body>
<iframe id= "ifrtalbe " frameborder= "1 " scrolling= "yes " src= "tablepage.html "> </iframe>
<input type= "button " id= "btnAdd " value= "Add row to end ">
<input type= "button " id= "btnRemove " value= "Remove row from end ">
</body>
<script language= "JavaScript ">
<!--
var oAdd = document.getElementById( "btnAdd ");
var oRemove = document.getElementById( "btnRemove ");
function getTBody()
{
var oIframeDoc = document.frames( "ifrTalbe ").document;
var oTable = oIframeDoc.getElementById( "tabTarget ");
return oTable.getElementsByTagName( "tbody ")[0];
}
oAdd.onclick = function() {
var oTBody = getTBody();
if (oTBody)
{
var newRow = oTBody.lastChild.cloneNode(true)
for (var i=0; i <newRow.childNodes.length; i++)
{
newRow.childNodes(i).innerHTML = " ";
}
oTBody.appendChild(newRow);
}
};
oRemove.onclick = function() {
var oTBody = getTBody();
if (oTBody.rows.length > 1)
{
oTBody.deleteRow();
}
else
{
alert( "Stop! Are you crazy? ");
}
};
//-->
</script>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
