JSFiddle - React, Tailwind, and code Playground

by Maciej Kwas

HTML

<table>
  <tbody>
<tr role="row" class="odd">
<td>
<div class="checkbox"><input type="checkbox" id="checkbox1" value="check" class="selected"><label for="checkbox1"></label></div>
</td>
<td></td>
<td><a id="link" href="detail.jsp">tom</a></td>
<td><a id="link" href="detail.jsp">dsdsdsds</a></td>
<td></td>
<td><a id="link" href="detail.jsp">oo</a></td>
<td><div id="id1" style="display:none;">60</div></td>
</tr>   
<tr class="unread even" role="row">
<td>
<div class="checkbox"><input type="checkbox" id="checkbox0" value="check"> 
<label for="checkbox0"></label></div>
</td>
<td></td>
<td><a id="link" href="detail.jsp">jones</a></td>
<td><a id="link" href="detail.jsp">aa</a></td>
<td></td>
<td><a id="link" href="detail.jsp" >oo</a></td>
<td><div id="id2" style="display:none;">61</div></td>
</tr>
<tr role="row" class="odd">
<td>
<div class="checkbox"><input type="checkbox" id="checkbox3" value="check" class="selected"><label for="checkbox1"></label></div>
</td>
<td></td>
<td><a id="link" href="detail.jsp">tom</a></td>
<td><a id="link" href="detail.jsp">dsdsdsds</a></td>
<td></td>
<td><a id="link" href="detail.jsp">oo</a></td>
<td><div id="id3" style="display:none;">69</div></td>
</tr>   
</tbody>
</table>

<pre id="result">ee</pre>

CSS

table td {
  border: 1px solid #333;
}

JavaScript

var idx = 1;
var found = [];
var trs = [].slice.call(document.querySelectorAll('table tr'));
trs.forEach(function(tr){
	var isSelected = (tr.querySelector('input')).classList.contains('selected');
  console.log(isSelected);
  if(isSelected){
  	console.log(document.getElementById('id'+idx));
  	var value = (document.getElementById('id'+idx)).innerText;
  	found.push({id: idx, value: value});
  }
  idx++;
});

(document.getElementById('result')).innerHTML = found.reduce(function(p, c){ return p + ' \n ' + c.id + ':' + c.value }, '');