使用Javascript在div标签中水平附加表格

时间:2015-09-02 11:58:40

标签: javascript html html-table

当我点击按钮时,我想要水平追加表而不是垂直

 <html>
<head>
<title>Test</title>
<script language="javascript" src="emerchemie/jquery/jquery.js"></script>
<script language="javascript">
function genTbl(){
    $('#maintd').append('<table width="500" border="1"><tr><td width="300"> Name</td><td width="150">Address</td></tr><tr><td colspan="3">&nbsp;</td></tr></table>');
}
</script>
</head>

<body>
<input type="button" onClick="genTbl();" name="e" id="e" value="Submit">
<div style="display:inline" id="maintd"></div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

Please add style="float:left;" to your table in append method like this:-
$('#maintd').append('<table style="float:left;" width="500" border="1"><tr><td width="300"> Name</td><td width="150">Address</td></tr><tr><td colspan="3">&nbsp;</td></tr></table>');

答案 1 :(得分:0)

试试这个..

 <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

    function genTbl() 

{
    $('#divResults').append('<table style="float:left;" width="500" border="1"><tr><td width="300"> Name</td><td width="150">Address</td></tr><tr><td colspan="3">&nbsp;</td></tr></table>');
}

    </script>
        </head>
    <body>
    <div id="divResults">
    </div>
    <button onclick="genTbl()">submit</button>
    </body>
    </html>