Question

js css 绘制表格，控制表格位置？

画一些图中的小方块 代表位置 由于点击这个方块之后要append（文本框）所以最开始使用table来画这个方块 问题1目前是用 <table id='pl' border='1' style='top:"+y0+";left:"+x0+";position:absolute'> 这种变量控制他的位置 想问一下 有没有更好的实现手段？ 问题2.假如要实现append（文本框）这个功能 用 canvas 画的矩形能实现吗？能实现$（画的矩形）.append 吗？问题3：没学过css 想问一下 如图中的 问题 小方块的 总高度 如何适应中心的大方块长度 自动调整每个方块的高度？求大神帮忙 html css学得不好 求大神 小神帮忙

Answer 1

1. 位置控制可分为position、margin&padding以及标签占位，但使用position最灵活，所以你用的没错。

2. canvas就是画画，你想想能往一张图片里append吗？append到canvas的父级再position吧。

3. 自适应需要使用百分比的值设置宽高，例如：height:30%，这要看你的html结构了，不好说。

4. 最好能把需求针对地描述地详细点，画图也不能太马虎，才能更好的解决问题，左4右5上8下7，这结构看着就乱，感觉不正确，是不是你就是这种需求呢？

追问

谢谢您的回复 需求是用这个小方块代替位置 所以左右上下的小方块的个数是不确定的 得用户自己输入 中间大方块内的小方块总数量也是不确定的 也得用户自己输入 因为个数是不确定的 所以 都是使用 循环 然后字符串拼接 然后再append 来完成的 HTML里确定的结构几乎就没有 所以想把这个位置自适应一下 您还有好的建议吗？感激不尽

追答

小方块干嘛用? 做游戏吗? 适应屏幕?

追问

谢谢您的回复 其实是代表餐厅的座位 然后中间的大格代表大厅 四周的 代表包间 做一个类似餐厅布局的简易图 append 文本框那个是想输入然后确定 这个方块代表的座位号

追答

无序布局，需要熟练的js。

let's go.

前提：餐厅的座位及包间的数量固定及位置比例固定

假设你是为了适应屏幕而要改变方格大小，

1. 首先以屏幕尺寸为基准量，其他方格的尺寸以其按比例设置，建议比例参数设置于方格标签上的自定义属性，后用js提取，循环设置方格标签，这样就可以形成一个布局。

2. 另外设置input的容器，并将其隐藏。点击某一小方格时，将其定位于方格上方，类似于百度图片的放大效果，并设置关联，完成输入后设置自定义属性。

着重点：js的大小、位置、距离计算

追问

谢谢您的回复 非常非常的感谢 但是包间的数量总数虽然是一定的 但是四周方格的数量都是不一定的 是用户自己设定的 有可能一边多 另外一边少 为了界面好看一些 您还有好的想法吗

追答

用户自己拖动格子布局，是这个意思吧。
那设置完毕后，位置坐标比例，单元格大小比例，不就固定了。
修改频繁的就保存到数据库，否则直接生成静态页面最优。
页面加载时只需要靠js调整格子大小了。

追问

谢谢您的回复 我最开始也是做得拖动 被老师给否了 现在就是用户输入四周包间也就是方格的个数 然后系统按照图的那样四周展开布局 我做了好多天总是不满意效果 所以问问您 麻烦您了 有好的布局想法吗

追答

展开也需要规则嘛

分为三层布局，中间三列，再往内部放格子，稀疏的就加大间距，加大尺寸，反之亦然。

可以先按平均分布，再按规则增减

多加判断，并多多尝试变换排列规则，比如说太密的话，左边格子（2-1）就可以放两列了。

追问

感谢您耐心的帮忙解答

追答

你在做毕设吗?

追问

恩恩 是的 毕业课设 哈哈

Answer 2

同学，不用那么复杂：

demo

<script> 
   window.onload=function(){
             var cssTable = document.getElementById('table1');  
            cssTable.style.background = '#f69';
            cssTable.style.marginLeft="200px";
            cssTable.style.border="1px solid #ccc";
   }
</script>

<table id="table1">
    <tr>
        <td>1111</td>
        <td>123123</td>
    </tr>
    <tr>
        <td>1111</td>
        <td>123123</td>
    </tr>
</table>

自己按照这个样式来变换  绝对是木有问题的  可用就给分  不可用可以说说你的需求  让哥帮帮你

追问

谢谢您的回复 这句 让哥帮帮你 感觉好像找到了 组织一样亲切 哈哈 中间的大格代表大厅 四周的 代表包间 做一个类似餐厅布局的简易图 四周每一个方向上的 方格也就是包间数量是不一定的 但是 四周加起来的总包间数量是一定的 中间大厅内座位数量是 确定的 您有什么好的布局方法吗 ？