Question

试图弄清楚如何获取表格/列标题的宽度以匹配表格行。表行宽度根据所选的表而变化。无法根据要工作的行获取调整表头大小的函数。

我希望第二个宽度与数据引入时表行的宽度相匹配。我尝试了很多不同的东西，但似乎无法使它工作。尝试使用将获取第一行并调整表头大小的函数。我想我只是错过了一些相当小的东西，但我不确定。它在这一点上变得很烦人。感谢您的任何帮助，谢谢。

继承人的PHP

$result = @mysqli_query($conn,$sql);
$resultCheck = mysqli_num_rows($result);

echo "<div>
<table class='scroll' id='table'>
<thead>
<tr>
        <th class=\"th1\"colspan=\"6\">Huntsville Hospital(Main) Carousel 
Report
        <input type='text' id='myInput' onkeyup='searchfunction()' 
align='right' placeholder='Search...'> </th>
    </tr>
    <tr>
    <th>MedID</th>
    <th>Medication Description</th>
    <th>Current Count</th>
    <th>Current Min</th>
    <th>Current Max</th>
    <th>Location</th>
    </tr>
    </thead>";
 if($resultCheck > 0) {
 while ($row = mysqli_fetch_assoc($result)){
    "<tbody>";
    echo"<tr>";
    echo "<td class='mednum'>" . $row['MedID']."</td>";
    echo "<td>" . $row ['MedDescription']."</td>";
    echo "<td class='countnum'>" . $row ['CurrentCount']."</td>";
    echo "<td class='countnum'>" . $row ['Currentmin']."</td>";
    echo "<td class='countnum'>" . $row ['CurrentMax']."</td>";
    echo "<td class='locationcol'>" . $row ['Location']."</td>";
    echo "</tr>";
    "</tbody>";
}
echo "</table>
    </div>";
}

这是js

var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').resultCheck(),
colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').resultCheck().each(function(i, v) {
    $(v).width(colWidth[i]);
});    
}).resize();

这是我的css

table{

border: 1px solid black;
border: collapse;
position: relative;


}

td, tr {

border: 1px solid black;
border-collapse: collapse;
padding: 5px;

}
table.scroll {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid black;
}

table.scroll tbody {
height: 525px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody,
table.scroll thead { display: block; }

td.countnum {

width: 9%;
text-align: right;
}
td.mednum{
width: 15%;
text-align: right;
}
td.locationcol{
width: 5%;
}
thead {
text-align: center;
color:black;
}
th{
width: 100%;
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
background-color: lightgreen;
color: black;
}

tbody tr:nth-child(odd){
background: white;
}
tbody tr:nth-child(even){
background: lightgray
}

#myInput{
    background: white url(searchicon.png) right no-repeat;
    background-position: 100% 50%;
    background-size: 20%;
    float: right;
    width: 20%;
    font-size: 16px;
    padding-left: 5px;      
    border: 1px solid green;

}
.th1{
background-color: lightgreen;
text-align: center;
color:black;
font-size: 24px;
}

Answer 1

我不确定是否能正确理解您的问题，但是我看到一些问题：

 while ($row = mysqli_fetch_assoc($result)){
    "<tbody>"; // <- no echo and inside while loop
    echo"<tr>";
    echo "<td class='mednum'>" . $row['MedID']."</td>";
    echo "<td>" . $row ['MedDescription']."</td>";
    echo "<td class='countnum'>" . $row ['CurrentCount']."</td>";
    echo "<td class='countnum'>" . $row ['Currentmin']."</td>";
    echo "<td class='countnum'>" . $row ['CurrentMax']."</td>";
    echo "<td class='locationcol'>" . $row ['Location']."</td>";
    echo "</tr>";
    "</tbody>"; // <- no echo and inside while loop
}

这可能不是一个“真正的”问题，因为大多数浏览器都自行添加了丢失的tbody标签，这将使您的tbody tr:first查询正常工作，但我仍然会解决它。

也不清楚.resultCheck()的作用-但我认为它会进行某种验证，并返回最初匹配的jQuery选择器结果。

我看到的下一个问题是：

colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

$table.find('thead tr').resultCheck().each(function(i, v) {
    $(v).width(colWidth[i]);
});

您可以在调整窗口大小时执行此操作，并直接触发窗口调整大小-因此宽度自从首次调用以来就不会发生变化，因为下面的td自然继承了th的宽度。

通常，对于我来说，您要实现的目标不是很清楚-如果完全省略宽度设置，它可能会按照您希望的方式运行。检查以下示例：

const tbody = document.querySelector('tbody');
const data = {
  'one': [
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1', 'Col 2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6']
  ],
  'two': [
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
    ['Col1 with a long text', 'Col2', 'Col 3 text', 'Col 4 text', 'Col 5 number', 'Col 6'],
  ]
};
const loadData = function(id) {
  while(tbody.firstChild) tbody.firstChild.remove();
  for(let row of data[id]) {
    let tr = document.createElement("tr");
    for(let cell of row) {
      let td = document.createElement("td");
      td.innerText = cell;
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
}

document.querySelector('#one').addEventListener('click', () => loadData('one'));
document.querySelector('#two').addEventListener('click', () => loadData('two'));
document.querySelector('#fixSize').addEventListener('click', () => {
  let headers = document.querySelectorAll('thead tr:last-child th');
  let firstRow = document.querySelectorAll('tbody tr:first-child td');
  for(let i = 0; i < headers.length; i++) {
    headers[i].style.width = firstRow[i].clientWidth + 'px';
  }
});
document.querySelector('#freeSize').addEventListener('click', () => {
  let headers = document.querySelectorAll('thead tr:last-child th');
  for(let i = 0; i < headers.length; i++) {
    headers[i].style.width = null;
  }
});

table {
  width: 100%;
  border-right: 1px solid grey;
  border-top: 1px solid grey;
}
th, td {
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
}

<table cellspacing="0">
  <thead>
    <tr>
      <th colspan="6">Title</th>
    </tr>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
      <th>Col 6</th>
  </thead>
  <tbody>
  </tbody>
</table>

<hr>
<button id="one">Load one</button>
<button id="two">Load two</button>
<hr>
<button id="fixSize">Fix size</button>
<button id="freeSize">Free size</button>

当表更改时，调整表标题/行的大小以匹配表中的第一行

1 个答案: