JavaScript - 具有select的表,不会在单元行跨度上重新调整

时间:2017-07-06 07:19:48

标签: javascript html html-table

在我的节目表中,我很难根据选择正确调整行距。每个选择都有不同的行数。我有各种不像我希望的那样运作的东西。我是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;
&#13;
&#13;

0 个答案:

没有答案