动态增加table,tr,td

最新推荐文章于 2023-03-21 17:56:29 发布

黑暗行动

最新推荐文章于 2023-03-21 17:56:29 发布

阅读量740

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/chy2z/article/details/80080145

版权

Javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
<!--

//创建表格
var table_node=document.createElement("table");
//创建TBody
var tbody_node=document.createElement("tbody");

function ButtonCreatTable_onclick()
{
//得到行和列
var rows=parseInt(document.getElementById("Text_row").value);
var cols=parseInt(document.getElementById("Text_columns").value);
//得到 Div id="tableAppear"
var table_div=document.getElementById("tableAppear");

table_div.appendChild(table_node);

tbody_node.id="tablebody";
table_node.appendChild(tbody_node);
// loop to add all the <tr>
for(var row_index=1;row_index<=rows;row_index++)
{
    var tr_node=document.createElement("tr");
    tbody_node.appendChild(tr_node);
    for(var col_index=1;col_index<=cols;col_index++)
    {
       var td_node=document.createElement("td");
       tr_node.appendChild(td_node);
       var td_text=document.createTextNode("Row: "+row_index+" Col: "+col_index);
       td_node.appendChild(td_text);
    }
}
}

function ButtonReplace_onclick()
{
      if(document.getElementById("tableAppear").hasChildNodes()) //有孩子
      {
         var cloneTable=table_node.cloneNode(true); //复制表格
         var reptable=document.getElementById("replaceTable");
         document.getElementById("replaceDiv").replaceChild(cloneTable,reptable); //替换到当前位置

      }
      else
        alert("请点击创建表格！");
}

function ButtonDel_onclick()
{
    if(document.getElementById("tableAppear").hasChildNodes())
    {
        var delrow=parseInt(document.getElementById("Text_del").value);
        var del_node=tbody_node.childNodes[delrow-1];
        tbody_node.removeChild(del_node);
    }
    else
        alert("请点击创建表格！");
}

// -->
</script>
</head>
<body>
<form id="from1">
    <input id="ButtonCreat" style="width: 148px" type="button" value="创建表格" οnclick="ButtonCreatTable_onclick()" />
    行:
    <input id="Text_row" type="text" value="2"/>
    列：
    <input id="Text_columns" type="text" value="3"/>
    <br />
    <br />
    表格出现在这里：<br />
    <div id="tableAppear">

    </div>
    <br />
    <br />
    <br />
    <input id="Button1" style="width: 206px" type="button" value="在任意行前增加一行" οnclick="innser_Tr()" />
     任意行：<input id="Text_insert" type="text" value="1" /><br />
    <br />
    <br />
    <br />
    <input id="ButtonDel" type="button" value="删除任意行" style="width: 200px" language="javascript" οnclick="return ButtonDel_onclick()" />
    任意行：<input id="Text_del" type="text" value="2" />
    <br />
    <br />
    <br />
    <input id="ButtonReplace" style="width: 200px" type="button" value="取代子接点" language="javascript" οnclick="return ButtonReplace_onclick()" />
    <div id="replaceDiv">
    <table id="replaceTable">
    <tr>
    <td width=30%>1</td>
    <td width=35%>2</td>
    <td width=35%>3</td>
    </tr>
    </table>
    </div>
</form>
</body>
</html>

黑暗行动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态增加table,tr,td

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > Untitled Page //创建表格 var table_node=document.createElement("table"); //创建TBody var tbody_node=document
复制链接

扫一扫

专栏目录