Блог

Как я могу удалить границу первой ячейки из таблицы с помощью JavaScript? (и, в конечном счете, остальные, как показано)

 var firstRow = document.getElementById("tbl1").rows[0].cells;
//Get first cell
//firstRow[0].style.REMOVE CELL BORDER
//Get 2nd row of tbl1
var secRow = document.getElementById("tbl1").rows[1].cells;
//Get 5th cell
secRow[4].style.backgroundColor = 'darkBlue';
//Get 4th row of tbl1
var fouthRow = document.getElementById("tbl1").rows[3].cells;
//Get 3rd, 4th and 5th cell
fouthRow[2].style.backgroundColor = 'darkBlue';
fouthRow[3].style.backgroundColor = 'darkBlue';
fouthRow[4].style.backgroundColor = 'darkBlue';
//Get 7th row of tbl1
var seventhRow = document.getElementById("tbl1").rows[6].cells;
//Get 2nd, 3rd cell
seventhRow[1].style.backgroundColor = 'darkBlue';
seventhRow[2].style.backgroundColor = 'darkBlue';
  

По сути, я хочу удалить ячейку из таблицы.
Если есть лучший способ получить желаемый результат, я не против. Спасибо!

Я придумал 2 идеи для вашей проблемы.

1-й:

Если вас не волнует выравнивание ячеек (но я верю, что это так ..), вы можете настроить таргетинг на td следующим образом:

 const myTable = document.querySelector('#myTable tbody')
const myRows = document.querySelectorAll('#myTable tr')
const childToRemove = myRows[0].children[0]

  

и удалите это следующим образом:
myRows[0].removeChild(childToRemove)

Однако, чтобы сохранить пользовательский интерфейс без изменений, я бы, вероятно, выбрал следующее решение:

 const myTable = document.querySelector('#myTable tbody')
const myRows = document.querySelectorAll('#myTable tr')
const childToRemove = myRows[0].children[0]

childToRemove.style.borderColor = 'white'
childToRemove.style.color = 'white'
childToRemove.style.pointerEvents = 'none'
  

вот JSfiddle:https://jsfiddle.net/mkbctrlll/Lumjcy7d/35 /

Надеюсь, это поможет

Лично я думаю, что вам следует искать более динамичный способ, чем ваша текущая жестко закодированная версия.

Вот простая onclick и предварительно выбранная версия функции:

 // pre removed version
function rmPre(r,c) {
  var tbl = document.getElementById("tbl1");
  // remove border
  tbl.rows[r].cells[c].style.border = "0px";
  // remove background
  tbl.rows[r].cells[c].style.background = "transparent";
}

// onclick code
function rm(e) {
  // remove border
  this.style.border = "0px";
  // remove background
  this.style.background = "transparent";
}

window.onload = function() {
  var tbl = document.querySelector("#tbl1");
  var td = tbl.querySelectorAll("td");
  var i, max = td.length
  for(i=0;i<max;i  ) {
    td[i].addEventListener("click",rm,false);
  }
  // remove onload r1,c1 and r3,c2
  rmPre(0,0);
  rmPre(2,1);
}  

 #tbl1 td {
 padding:0.5em;
 background:#e2edff;
 border:1px solid #000;
}  

 <p>
Click a cell to remove. r1,c1 and r3,c2 already removed
</p>
<table id="tbl1">
<tr>
<td>r1,c1</td><td>r1,c2</td><td>r1,c3</td>
</tr>
<tr>
<td>r2,c1</td><td>r2,c2</td><td>r2,c3</td>
</tr>
<tr>
<td>r3,c1</td><td>r3,c2</td><td>r3,c3</td>
</tr>
</table>