Javascript 水平拟合内容

我正在重写一个web应用程序，它直观地表示数据，并希望结果自动填充可用宽度（以前的版本有一些用户可选择的缩放因子）。我已将布局简化为：

.bar{
高度：25px；
背景：绿色；
颜色：白色；
}

第1列
第2栏
第1排
第1单元
第2单元
第2排
第3单元
第4单元

只需一点JavaScript和一个稍加修改的CSS文件，就可以完成您想要的任务。这将计算列数（减去初始列），并均匀分布其宽度

<style>
.bar {
  height: 25px;
  background: green;
  color: white;
}

table{
  width: 100%;
}

table tbody tr td:first-child{
  width: 20%;
}

table tbody tr td{
  width: 40%;
}
</style>

.酒吧{
高度：25px；
背景：绿色；
颜色：白色；
}
桌子{
宽度：100%；
}
表tbody tr td：第一个孩子{
宽度：20%；
}
表tbody tr td{
宽度：40%；
}

然后是你的HTML

<table>
  <thead>
    <tr>
      <th></th>
      <th>column #1</th>
      <th>column #2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row #1</td>
      <td>
        <div class="bar" data-value="50">
          cell #1
        </div>
      </td>
      <td>
        <div class="bar" data-value="100">
          cell #2
        </div>
      </td>
    </tr>
    <tr>
      <td>row #2</td>
      <td>
        <div class="bar" data-value="80">
          cell #3
        </div>
      </td>
      <td>
        <div class="bar" data-value="75">
          cell #4
        </div>
      </td>
    </tr>
  </tbody>
</table>

第1列
第2栏
第1排
第1单元
第2单元
第2排
第3单元
第4单元

然后是一些简单的JavaScript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
  var v, b, n, max = 0;
  var t = $('table');
  var w = t.width();

  // Set equal width for all columns
  var c = (80/(t.find('thead tr th').length-1));

  // Set widths of internal bars relative to the max value
  $('.bar')
    .parent()
      .css({width: c + "%"})
      .end()
    .each(function(){
      // Determines max value
      v = parseFloat($(this).attr('data-value'));
      if(v>max){
        max = v;
      }
    })
    .each(function(){
      // Sets each bar to be a percent width based on max value
      b = $(this);
      n = (((parseFloat(b.attr('data-value')) / max) * 100));
      b.css({width: n + "%"})
    });

});
</script>

$（文档）.ready（函数（）{
变量v，b，n，最大值=0；
var t=$（‘表’）；
var w=t.宽度（）；
//为所有列设置相等的宽度
var c=（80/（t.find（'thead tr th'）。长度-1））；
//设置内部钢筋相对于最大值的宽度
$（“.bar”）
.parent（）
.css（{宽度：c+“%”）
(完)
.each（函数（{
//确定最大值
v=parseFloat（$（this.attr（'data-value'））；
如果（v>最大值）{
最大值=v；
}
})
.each（函数（{
//将每个栏设置为基于最大值的宽度百分比
b=$（本）；
n=（（parseFloat（b.attr（'data-value'））/max）*100）；
b、 css（{width:n+“%”}）
});
});

在需要“固定”的第一列以及第二列和第三列上创建一个

类
。在4个
div
栏中添加
id，以便我们可以根据其宽度对其进行操作：


HTML

    <table>
  <thead>
    <tr>
      <th class="fixed"></th>
      <th class="col">column #1</th>
      <th class="col">column #2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fixed">row #1</td>
      <td class="col">
        <div class="bar" id="cell1" style="width:50px">
          cell #1
        </div>
      </td>
      <td class="col">
        <div class="bar" id="cell2" style="width:150px">
          cell #2
        </div>
      </td>
    </tr>
    <tr>
      <td class="fixed">row #2</td>
      <td class="col">
        <div class="bar" id="cell3" style="width:100px">
          cell #3
        </div>
      </td>
      <td class="col">
        <div class="bar" id="cell4" style="width:75px">
          cell #4
        </div>
      </td>
    </tr>
  </tbody>
</table>

document.getElementById("cell1").style.width = ((50/150)*100)+"%";
document.getElementById("cell2").style.width = ((150/150)*100)+"%";
document.getElementById("cell3").style.width = ((100/150)*100)+"%";
document.getElementById("cell4").style.width = ((75/150)*100)+"%";




最后，根据其
id
获取每个
div
，并将其
width
设置如下，考虑到150px是此处的基础：


JS

    <table>
  <thead>
    <tr>
      <th class="fixed"></th>
      <th class="col">column #1</th>
      <th class="col">column #2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fixed">row #1</td>
      <td class="col">
        <div class="bar" id="cell1" style="width:50px">
          cell #1
        </div>
      </td>
      <td class="col">
        <div class="bar" id="cell2" style="width:150px">
          cell #2
        </div>
      </td>
    </tr>
    <tr>
      <td class="fixed">row #2</td>
      <td class="col">
        <div class="bar" id="cell3" style="width:100px">
          cell #3
        </div>
      </td>
      <td class="col">
        <div class="bar" id="cell4" style="width:75px">
          cell #4
        </div>
      </td>
    </tr>
  </tbody>
</table>

document.getElementById("cell1").style.width = ((50/150)*100)+"%";
document.getElementById("cell2").style.width = ((150/150)*100)+"%";
document.getElementById("cell3").style.width = ((100/150)*100)+"%";
document.getElementById("cell4").style.width = ((75/150)*100)+"%";


我希望这会有所帮助
 你能创建一个plnkr吗？我能，但只能使用给定的示例代码。这真的有帮助吗？我试图通过所有的噪音来理解实际问题，但我不能。你想做什么？你想从我们这里得到什么？@Gordian你说你想让它“自动填充可用宽度”，但在你的更新中你说“这样桌子就占据了所有可用的垂直空间”-垂直意味着上下，宽度意味着两边。你想要哪一个？虽然它不是我想要的100%，但它很接近！你给了我一个如何解决这个问题的新想法，我想我可以从这里开始：-）。你理解我的问题，而其他人却不理解-你有没有任何反馈我如何可以问一个更好的问题（例如，我只是找不到一个描述性的标题）？我很高兴我能提供帮助，顺便说一句，你可以在固定列中使用
px
值，并将另外两个的宽度设置为
auto
。实际上，您的请求在某种程度上是明确的，问题是它太长了，请尽量使其简洁。这并不能解决您的问题，它完全基于固定的数字，也不能考虑不同数量的单元格。@Josh Miller是的，这不是一个我可以直接插入代码的解决方案，但它解决了我想要的问题，而且很容易修复。谢谢你试图帮助我，但这不是我想要的：-（。这不是你的错误，因为这个问题似乎很难理解（尽管我在发布之前尽了最大努力描述我的问题）.您基本上只是增加了表格的大小，以适应所有可用的水平空间。我的目标是扩展栏的大小，直到达到该点（这可以理解吗？）。我想我的答案解决了这个问题。它将表格的宽度设置为100%，然后使每个单元格的宽度相等。如果条形为100%，它将占据整个单元格。如果条形为50%，它将占据一半宽度，等等。@Gordian，我修改了我的答案以反映新信息。我们仍然将表格列设置为相等宽度h-这对于确保单元格1和单元格2使用相同的基本比例是必要的。然后我们找到所有可用单元格的最大值，然后将其作为基线来设置所有其他单元格的比例。我们不是在
.bar div的
中包含样式，而是包含存储我们想要的值的
数据值
属性h进行比较。一些JavaScript找到最大值，然后确保所有其他列在最大值为100%的基础上进行百分比缩放。@Gordian，我想你应该接受这一点作为答案，以便人们能够找到正确的解决方案。我个人喜欢Josh Miller的方法：）