我有一個form我用來修改 a SQL tables 值的。我可以很容易地使用 ; 來填充所有內容PHP；但是，我在input正確調整欄位大小時遇到??問題。我希望有一種比蠻力強迫它CSS以我想要的方式作業更簡單的方法......
PHP/HTML
echo "<table class='modify woSub'>";
echo "<tr><th>KeyID</th><th>Rx Number</th><th>Name</th><th>Alt Name</th><th>Patient</th><th>Prescriber</th><th>Dose/Pill</th>
<th>Dose Metric</th><th colspan='2'>Quantity / Frequency</th><th class='box'>AM</th><th class='box'>Noon</th><th class='box'>PM</th>
<th class='box'>Bed</th><th class='box'>PRN</th><th>Last Fill</th><th>Pills Filled</th></tr>";
echo "<form class='modifyForm' action='modify.php' method='post'>";
$sql = "SELECT * FROM prescriptions WHERE patient = '$patient' ORDER BY rxPrimeName";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td><input type='text' inputmode='numeric' value='" . $row['keyID'] . "' name='keyID' disabled/></td>";
echo "<td><input type='text' inputmode='numeric' value='" . $row['rxID'] . "' name='rxID'/></td>";
echo "<td><input type='text' value='" . $row['rxPrimeName'] . "' name='rxPrimeName'/></td>";
echo "<td><input type='text' value='" . $row['rxAltName'] . "' name='rxAltName'/></td>";
echo "<td><input type='text' value='" . $patient . "' name='patient' disabled/></td>";
echo "<td><input type='text' value='" . $row['prescriber'] . "' name='prescriber'/></td>";
echo "<td><input type='text' inputmode='numeric' value='" . $row['dpp'] . "' name='dpp'/></td>";
echo "<td><input type='text' value='" . $row['dppMetric'] . "' name='dppMetric'/></td>";
echo "<td><input class='split' type='text' inputmode='numeric' value='" . $row['frequency'] . "' name='frequency' style='border-right: none !important'/></td>";
echo "<td><input class='split' type='text' value='" . $row['freqMetric'] . "' name='freqMetric' style='border-left: none !important'/></td>";
echo "<td><input type='checkbox' name='am' value='am' /></td>";
echo "<td><input type='checkbox' name='pm' value='noon' /></td>";
echo "<td><input type='checkbox' name='pm' value='pm' /></td>";
echo "<td><input type='checkbox' name='bed' value='bed' /></td>";
echo "<td><input type='checkbox' name='prn' value='prn' /></td>";
echo "<td><input type='date' value='" . $row['lastFill'] . "' name='lastFill'/></td>";
echo "<td><input type='text' inputmode='numeric' value='" . $row['pills'] . "' name='pills'/></td>";
echo "</tr>";
}
}
echo "</form>";
echo "</table>";
CSS
table {
border-collapse: collapse;
width: 1400px;
}
th,
td {
border: 1px solid white;
border-collapse: collapse;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
th {
padding: 5px 10px;
}
td>input {
width: 85%;
margin: 5px;
}
.box {
width: 10px;
}
.split {
width: 30px;
text-align: center;
}
這是我正在使用的PHP> Table> 。Form不，我還沒有放一份submit，我也不太擔心。我現在只是在研究美學。
以下是它按原樣顯示的片段：
伊姆古爾圖片
如果您查看前 4 columns，這就是我要適應的區域。padding我希望這一切都能用一點點（如 2-5 px）來適應最大值的大小。
我在網上找到的所有內容都是關于如何在鍵入時讓輸入自動擴展，但我正在嘗試根據php被推入value attribute.
uj5u.com熱心網友回復：
這是一個有點復雜的javascript方法。這個想法是創建一個與輸入欄位具有完全相同樣式的元素。然后從按列排序的每個輸入欄位中加載字串并找到最長的字串。然后設定每列的輸入寬度。
const setWidth = (() =>
{
//clone style from <input> into our hidden div
const div = document.createElement("div"),
selector = '.modify input[type="text"]'; //input fields
div.className = "hiddenBox";
for(let i = 0, style = getComputedStyle(document.querySelector(selector)); i < style.length; i )
div.style[style[i]] = style[style[i]]; //copy all styles into hidden div
document.body.appendChild(div);
return () =>
{
let max = [];
for(let i = 0, input = document.querySelectorAll(selector); i < input.length; i )
{
div.textContent = input[i].value; //load text into hidden div
if (div.clientWidth > ~~max[input[i].parentNode.cellIndex])
max[input[i].parentNode.cellIndex] = div.clientWidth; //record widest size
}
for(let i = 0, box = document.querySelector(".modify"); i < max.length; i )
max[i] && box.style.setProperty("--width" (i 1), max[i] "px"); //set CSS variable for input width for each column
}
})();
setWidth(); //set <input> width
//ignore everything below
generateRows(10) //add 10 rows
function generateRows(num)
{
// generate additional rows
for(let i = 1, tr = document.querySelector(".modify tr:not(:first-child)"); i < num; i )
tr.parentNode.appendChild(tr.cloneNode(true));
randText(); //generate text
}
function randText()
{
for(let i = 0, input = document.querySelectorAll('.modify input[type="text"]'); i < input.length; i )
{
input[i].value = "";
let len = ~~(Math.random() * 20 1);
while(input[i].value.length < len)
{
input[i].value = String.fromCharCode((~~(Math.random() * 2) ? 97 : 65) ~~(Math.random() * 26));
if (!~~(Math.random() * 10))
input[i].value = " ";
}
}
setWidth();
};.modify td:nth-child(1) input {width: var(--width1);}
.modify td:nth-child(2) input {width: var(--width2);}
.modify td:nth-child(3) input {width: var(--width3);}
.modify td:nth-child(4) input {width: var(--width4);}
.modify td:nth-child(5) input {width: var(--width5);}
.modify td:nth-child(6) input {width: var(--width6);}
.modify td:nth-child(7) input {width: var(--width7);}
.modify td:nth-child(8) input {width: var(--width8);}
.modify td:nth-child(9) input {width: var(--width9);}
.modify td:nth-child(10) input {width: var(--width10);}
.modify td:nth-child(17) input {width: var(--width17);}
.hiddenBox
{
position: absolute !important;
top: -200000vh !important;
width: unset !important;
white-space: pre !important;
padding: initial !important; /* delete this if some text doesn't fit */
border: 0 !important; /* delete this if some text doesn't fit */
}<button onclick="randText()">Generate again</button>
<table class='modify woSub'>
<tr><th>KeyID</th><th>Rx Number</th><th>Name</th><th>Alt Name</th><th>Patient</th><th>Prescriber</th><th>Dose/Pill</th>
<th>Dose Metric</th><th colspan='2'>Quantity / Frequency</th><th class='box'>AM</th><th class='box'>Noon</th><th class='box'>PM</th>
<th class='box'>Bed</th><th class='box'>PRN</th><th>Last Fill</th><th>Pills Filled</th></tr>
<form class='modifyForm' action='modify.php' method='post'>
<tr>
<td><input type='text' inputmode='numeric' value='' name='keyID' disabled/></td>
<td><input type='text' inputmode='numeric' value='' name='rxID'/></td>
<td><input type='text' value='' name='rxPrimeName'/></td>
<td><input type='text' value='' name='rxAltName'/></td>
<td><input type='text' value='' name='patient' disabled/></td>
<td><input type='text' value='' name='prescriber'/></td>
<td><input type='text' inputmode='numeric' value='' name='dpp'/></td>
<td><input type='text' value='' name='dppMetric'/></td>
<td><input class='split' type='text' inputmode='numeric' value='' name='frequency' style='border-right: none !important'/></td>
<td><input class='split' type='text' value='' name='freqMetric' style='border-left: none !important'/></td>
<td><input type='checkbox' name='am' value='am' /></td>
<td><input type='checkbox' name='pm' value='noon' /></td>
<td><input type='checkbox' name='pm' value='pm' /></td>
<td><input type='checkbox' name='bed' value='bed' /></td>
<td><input type='checkbox' name='prn' value='prn' /></td>
<td><input type='date' value='' name='lastFill'/></td>
<td><input type='text' inputmode='numeric' value='' name='pills'/></td>
</tr>
</form>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464303.html
上一篇：為什么url在通過輸入欄位時會轉換為HTML中的子url？[復制]
下一篇：表單未在反應中提交