Find hidden column value in a dynamacally bind html table with Sharepoint list - Javascript

Question

I have following code. Now I want to get the hidden column value based on user selected row. I also want to highlight the entire row, not only the e.target.
Can someone please help me.
function getTermdetailsQuerySuccsess(sender, args) {
var listEnumerator = Termsitems.getEnumerator();
var datatable = document.getElementById("TermList");
while (listEnumerator.moveNext()) {
var oListItem = listEnumerator.get_current();
//var firstName = listEnumerator.get_current().get_item('Title');
//var secondName = listEnumerator.get_current().get_item('LastName');
var termID = listEnumerator.get_current().get_item('ID');
var startdate = listEnumerator.get_current().get_item('startdate');
var enddate = listEnumerator.get_current().get_item('Enddate');
var termtype = listEnumerator.get_current().get_item('TermType');
var Hours = listEnumerator.get_current().get_item('Hours');
var EdNone = listEnumerator.get_current().get_item('EdNoned');
var Specialty = listEnumerator.get_current().get_item('Specialty');
var Subspecialty = listEnumerator.get_current().get_item('Subspecialty');
var Hospital = listEnumerator.get_current().get_item('Hospital');
var DEMT = listEnumerator.get_current().get_item('DEMT');
var Supervisor = listEnumerator.get_current().get_item('Supervisor');
rowcount = rowcount + 1;
$("#TermList").append("<tr style='border-bottom:1px silver solid' align='middle' class='gradeA'>" +
"<td align='left' style='display:none'>" + termID + "</td>" +
"<td align='left'>" + startdate + "</td>" +
"<td align='left'>" + enddate + "</td>" +
"<td align='left'>" + termtype + "</td>" +
"<td align='left'>" + Hours + "</td>" +
"<td align='left'>" + EdNone + "</td>" +
"<td align='left'>" + Specialty + "</td>" +
"<td align='left'>" + Subspecialty + "</td>" +
"<td align='left'>" + Hospital + "</td>" +
"<td align='left'>" + DEMT + "</td>" +
"<td align='left'>" + Supervisor + "</td>" +
"</tr>");
$('#TermList').click(function (e) {
var tr = $(e.target).parent().index() ;
alert(tr);
alert($(e.target).text()); // using jQuery
// var Cells = tr.e.getElementsByTagName("td");
$(e.target).addClass('row-highlight');
var confirmationM = confirm("Do you want to edit this term deatils ?");
if (confirmationM == true) {
confirmation = "You pressed OK!";
else {
confirmation = "You pressed Cancel!";
$(e.target).removeClass('row-highlight');
$('#TermList').click(function (e) {
var tr = $(e.target).parent().index() ;
alert(tr);
alert($(e.target).text()); // using jQuery
// var Cells = tr.e.getElementsByTagName("td");
$(e.target).addClass('row-highlight');
var table = $("#TermList")[0];
var cell = table.rows[tr].cells[1];
alert(cell);
var confirmationM = confirm("Do you want to edit this term deatils ?");
if (confirmationM == true) {
confirmation = "You pressed OK!";
else {
confirmation = "You pressed Cancel!";
$(e.target).removeClass('row-highlight');
d.n weerasinghe

Answer 1

Hi,
According to your post, my understanding is that you want to customize a table to display the list items.
We can write CSS to customize the table style(background color, highlight, hover).
The following is an example for your reference:
Code:
<style>
#TermList table {
border-collapse: collapse;
margin-bottom: 2em;
width: 100%;
background: #fff;
#TermList td, th {
padding: 0.75em 1.5em;
text-align: left;
#TermList th {
background-color: #31bc86;
font-weight: bold;
color: #fff;
white-space: nowrap;
#TermList tbody tr:nth-child(2n-1) {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
#TermList tbody tr:hover {
background-color: rgba(129,208,177,.3);
#TermList .HiddenColumn {
display:none;
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(getAllListItems, "sp.js");
$("#TermList tbody").click(function(e){
//get hidden column value
var hiddenColumn=$(e.target).parent().find(".HiddenColumn").text();
alert(hiddenColumn);
function getAllListItems(){
var listName="CustomList01";
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle(listName);
var query = SP.CamlQuery.createAllItemsQuery();
allItems = list.getItems(query);
context.load(allItems);
context.executeQueryAsync(Function.createDelegate(this, this.getSuccess), Function.createDelegate(this, this.failed));
function getSuccess() {
var ListEnumerator = this.allItems.getEnumerator();
while (ListEnumerator.moveNext()) {
var currentItem = ListEnumerator.get_current();
var itemID=currentItem.get_item("ID");
var name=currentItem.get_item("Title");
var email=currentItem.get_item("Email");
$("#TermList tbody").append('<tr><td class="HiddenColumn">'+itemID+'</td><td>'+name+'</td><td>'+email+'</td></tr>');
function failed(sender, args) {
alert("failed. Message:" + args.get_message());
</script>
<table id="TermList">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Result:
Best Regards
Dennis Guo
TechNet Community Support