JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script>


</script>
<input type="button" value="Lägg till rad" onClick="addRow()" />
<input type="button" value="Lägg till kolumn" onclick="addColumn()" />
<br/><br />
<input type="button" value="Ta bort rad" onclick="removeRow()" />
<input type="button" value="Ta bort kolumn" onclick="removeColumn()" />
<br/><br/>
<table id="theTable">
	<thead>
		<tr>
			<th>Första</th><th>Andra</th><th>Tredje</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1,1</td><td>1,2</td><td>4125</td>
		</tr>
		<tr>
			<td>2,1</td><td>2,2</td>
		</tr>
		<tr>
			<td>2,1</td><td>2,2</td><td>123</td>
		</tr>	
		<tr>
			<td>1,1</td><td>1,2</td>
		</tr>
		<tr>
			<td>2,1</td><td>2,2</td>
		</tr>
		<tr>
			<td>2,1</td><td>2,2</td><td>321</td>
		</tr>	
		<tr>
			<td>1,1</td><td>1,2</td>
		</tr>
		<tr>
			<td>2,1</td><td>2,2</td>
		</tr>
		<tr>
			<td>2,1</td><td>2,2</td>
		</tr>		
	</tbody>
</table>

CSS

#theTable{
	padding:2px;
	border-collapse: collapse;
}

#theTable th, #theTable td{
	padding:2px 4px 2px 4px;
	border:1px solid lightgrey;
}

#theTable th{
	background-color:lightgrey;
}

#theTable td{
	
}

.alt td{
	background-color:rgba(204, 204, 204, 0.5);
}

JavaScript

function addRow(){
    var table = document.getElementById("theTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
  };

var tr = document.getElementById('theTable').getElementsByTagName('tr');
for (i = 2; i < tr.length; i+=2){
	tr[i].className="alt"
}