在我的节目表中,我很难根据选择正确调整行距。每个选择都有不同的行数。我有各种不像我希望的那样运作的东西。我是Javascript的新手。任何帮助将不胜感激。
function tblAdjust(el, val) {
var shopids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27];
var shopls = [60, 45, 75, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60];
var len = 0;
var pos = 0;
for (x = 0; x < shopids.length; x++) {
if (val == shopids[x]) {
len = shopls[x];
pos = shopids[x];
}
}
var row = el.parentNode.parentNode.rowIndex;
var col = el.parentNode.cellIndex;
var span = el.parentNode.rowSpan;
var rowspan = len / 15;
if (span == 1) {
for (x = 0; x < rowspan - 1; x++) {
var trow = document.getElementById('tblB').rows[row + x];
trow.deleteCell(col);
}
el.parentNode.rowSpan = rowspan;
}
if (span != 1 && span == rowspan) {
alert('equal');
}
if (span != 1 && span != rowspan && span > rowspan) {
//alert('rowspan is greater');
el.parentNode.rowSpan = 1;
for (x = row + 2; x < span - 1; x++) {
var trow = document.getElementById('tblB').rows[row + x];
var xy = trow.insertCell(col);
//xy.innerHTML='<select name="Shop" onchange="tblAdjust(this,this.value)" required>...</select>';
}
el.parentNode.rowSpan = rowspan;
}
if (span != 1 && span != rowspan && span < rowspan) {
alert('rowspan is smaller');
for (x = 0; x < rowspan - 1; x++) {
var trow = document.getElementById('tblB').rows[row + x];
trow.deleteCell(col);
}
el.parentNode.rowSpan = rowspan;
}
}
&#13;
<table border="1" id="customTbl">
<thead>
<tr>
<th>Pool A</th>
<th>Pool B</th>
<th>Pool C</th>
</tr>
</thead>
<tbody id="tblB">
<tr>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
<td>
<select name="Shop" onchange="tblAdjust(this,this.value)" required>
<option value="1">Something Option 1</option>
<option value="2">Something Option 2</option>
<option value="3">Something Option 3</option>
</select>
</td>
</tr>
</tbody>
</table>
&#13;