如何使用iframe响应表制作表格

时间:2014-05-03 15:59:57

标签: javascript php iframe responsive-design

我一直在StackExchange上阅读一些帖子相关的Resposive网站。还尝试了我的localhost上的一些代码,但没有为我解决。

项目: - 我已经在php中制作了面向对象编程的酒店预订引擎我已经制作了一个表格使用表结构,用户可以选择签出日期和其他详细信息。

问题 - 我试着让表格成为重复的,但没有什么对我有用

目标: - 在人们可以选择签出签出日期的情况下使表单响应

PHP代码

$output .='<table cellspacing="2" border="0" style="width: 100%; border-collapse: collapse;">';
            if(!empty($output_hotels)){
                $output .= '<tr><td><label>'._SELECT_HOTEL.':</label></td></tr>
                        <tr><td nowrap="nowrap">'.$output_hotels.'</td></tr>';                  
                $output .= '<tr><td><label>'._SELECT_LOCATION.':</label></td></tr>
                        <tr><td nowrap="nowrap">'.$output_locations.'</td></tr>';
            }           
            $output .= '<tr><td>'._CHECK_IN.': '.$output1.'</td>&nbsp;<tb>'._CHECK_OUT.':'.$output2.'</td>&nbsp;<td>'.$output3.'</td>;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            if(!empty($output_hotels)){
                $output .= '<tr><td style="height:5px"></td></tr>
                        <tr><td nowrap="nowrap">'.$output_sort_by.'</td></tr>';
            }
            $output .= '<input class="button" type="button" onclick="document.getElementById(\'reservation-form\').submit()" value="'._CHECK_AVAILABILITY.'" /></table>';

IFRAME代码

if(hsJsHost != ''){

    var hsJsKey = (typeof hsJsKey === 'undefined') ? '' : hsJsKey;
    var hsJsHost = (typeof hsJsHost === 'undefined') ? '' : hsJsHost;

    if(hsJsKey != '' && hsJsHost != ''){

        var encoded_host = encode64(hsJsHost);
        var encoded_key = encode64(hsJsKey);        

        var filePath = 'widgets/ipanel-left/index.php?host='+encoded_host+'&key='+encoded_key;

        // setup the iframe target
        var iframe='<iframe id="frame" name="widget" src="#" width="15px" height="200px" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>';
        // write the iframe to the page
        document.write(iframe);

        var myIframe = parent.document.getElementById("frame");
        // setup the width and height
        myIframe.height = 100;
        myIframe.width = 815;

        myIframe.src = hsJsHost+filePath;
        // set the style of the iframe
        myIframe.style.border = "1px solid #aaa";
        myIframe.style.padding = "8px";
        myIframe.style.margin-right = "10px";
    }

}

请帮忙

1 个答案:

答案 0 :(得分:0)

您需要学习响应式CSS的基础知识。这意味着媒体查询,%和em / rem值等这里是一些基本资源

Mozilla media query page

css units

没有这个基础,你就无法建立更多。