java_web10.关于js 、jqury动态生成对象

1.动态生成 表格

jquary

 

/ 页面生成表格 id为html  生成表格所在div的 id
var  gendata2=function(row  column)
{

   var table=$("<table border=\"0\"  class=\"table\"  font size=\"200\"  >");
     table.appendTo($("#createtable2"));
     // 设置列头
      var tr=$("<thead> <tr > <th width=\"10\" height=\"30\" >步骤</th> <th width=\"10\" height=\"30\" >类型</th><th width=\"50\" height=\"30\" >元素名称</th></thead></tr> ");
      tr.appendTo(table);
 // 获取列值
      var  a=parseInt("0");
for(var i=0;i<row;i++)
     {
        var tr=$("<tr ></tr>");
        tr.appendTo(table);
       for(var j=0;j<column;j++)
     {
    td=$("<td id=stepByStep"+a+"  align=\"center\">字段</td>");
    td.appendTo(tr);
    }    
  
     }
    var white = "white";

   document.getElementById("createtable2").style.color = white;
     $("#createtable2").append("</table>");
        var white = "black";

}

　　2.点击按钮使 表格变文本框

<html>
    <head>
    <meta charset="utf-8">
        <title>test</title>
    </head>
    <script type="text/javascript">
    function test(td){
        if(td.innerHTML == "编辑"){
            td.innerHTML = '保存';
            document.getElementById('div').style.display = "none";
            document.getElementById("edit").style.display = "";
        }else{
            td.innerHTML = '编辑';
            document.getElementById('div').value = document.getElementById('input').value;
            document.getElementById('div').style.display = "";
            document.getElementById("edit").style.display = "none";
        }
    }
    </script>
    <body>
        <table border="1">
            <tr>
                <td>
                    <div id="div" style="width:180px;">123</div>
                    <input id="edit" value="" style="display:none;" />
                </td>
                <td onclick="test(this);">编辑</td>
            </tr>
        </table>
    </body>
</html>

 

posted on 2017-04-04 19:14  jurryfu  阅读(102)  评论(0)    收藏  举报