如何根据选择ID选项中选择的值,使用输入文本更改html表的行数和列数?
喜欢
型号:1,2,3,4
每个模型的项目数:(这是获取输入值的表,这需要根据“模型数”中选择的值更改表的行数或列数),这是我的代码:
<table>
<tr>
<th>Number of Models:<title="Number of Models"></th>
<td><select id="numberofmodels" onkeyup="NumberOfModels()" name="Number of Models">
<option >1</option >
<option >2</option >
<option >3</option >
<option >4</option >
<option >5</option >
<option >6</option >
</select></td>
</tr>
<tr>
<th>Number of items per model:</th>
<td>
<table border="1">
<tr>
<td>
<input id="itemsmodel" onkeyup="ItemsModelValidate()" type="text" maxlength="50" > <br>
</td>
</tr>
</table>
有人可以给我javascript函数ItemsModelValidate()来使这个工作吗?
我有以下javascript函数用于其他目的,可以编辑它来实现吗?
function ItemsModelValidate(){
$itemsmodel = document.getElementById("itemsmodel").value;
if(!/^[0-9]+$/.test($itemsmodel)) {
alert();
}
}
function NumbersOfModels(){
$numberofmodels = document.getElementById("numberofmodels").value;
if(!/^[0-9]+$/.test($numberofmodels)) {
alert();
}
}
答案 0 :(得分:0)
您可以使用以下内容:
<html>
<body>
<table>
<tr>
<th>Number of Models:</th>
<th>
<select id="NumberOfModels" name="Number of Models">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</th>
</tr>
<tr>
<th>Number of items per model:</th>
</tr>
<tr>
<td>
<table border="1">
<tbody id="itemsmodel"></tbody>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var models = document.getElementById("NumberOfModels");
var modelsTable = document.getElementById("itemsmodel");
models.addEventListener("change", drawModels, false);
function drawModels(){
var modelsNum = parseInt(models.value);
var curModels = modelsTable.rows.length;
if (modelsNum > curModels) {
var delta = modelsNum - curModels;
for(var i = 0; i < delta; i++) {
var rowElement = document.createElement("tr");
var cellElement = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("maxlength", "3");
input.addEventListener("keyup", drawItems, false);
cellElement.appendChild(input);
rowElement.appendChild(cellElement);
modelsTable.appendChild(rowElement);
}
} else {
while(modelsTable.rows.length > modelsNum){
var row = modelsTable.rows[modelsTable.rows.length - 1];
modelsTable.removeChild(row);
}
}
}
function drawItems(){
var row = this.parentNode.parentNode;
var val = this.value;
var isNum = /^\d+$/.test(val);
if(isNum){
var curCells = row.cells.length - 1;
var cellsNum = parseInt(val);
if(cellsNum > curCells){
var delta = cellsNum - curCells;
for(var i = 0; i < delta; i++) {
var cellEl = document.createElement("td");
cellEl.innerText = "Lorem ipsum";
row.appendChild(cellEl);
}
} else {
while(row.cells.length > cellsNum + 1) {
var cell = row.cells[row.cells.length-1];
row.removeChild(cell);
}
}
}
}
drawModels();
</script>
</body>
</html>