CODEWITHSUNDEEP
javascripthtml
Nick
Nick

Reputation: 57

How to remove a cell's border for a table?

How can I remove the first cell's border from a table via JavaScript? (and eventually, the others as depicted)

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';

Essentially, I want to remove the cell from the table. If there is a better way to get the desired result, I'm fine with that. Thank you!

Desired result

Upvotes: 1

Views: 197

Answers (2)

Tigger
Tigger

Reputation: 9120

Personally, I think you should be looking for a more dynamic way than your current hard coded version.

Here are a simple onclick and a pre-selected function version:

// 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>

Upvotes: 1

mkbctrl
mkbctrl

Reputation: 113

I have came up with 2 ideas for your problem.

1st one:

If you don't care about alignment of the cells ( but I believe you do.. ) You can target the td like this:

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

and remove it like this: myRows[0].removeChild(childToRemove)

However in order to maintain the UI intact I would probably go with the following solution:

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'

here is a JSfiddle: https://jsfiddle.net/mkbctrlll/Lumjcy7d/35/

Hope this helps

Upvotes: 1

Related Questions