Having trouble creating a scrollable list in a dynamically appended HTML table cell using JavaScript? You're not alone. Even after assigning the list to the cell parent, it seems that the list is not behaving as expected - it's not scrollable and the cell size doesn't match what you've set in the CSS. If you can help identify the mistake, I'd greatly appreciate it. Here’s the code snippet.
Essentially, I'm looking for a scrollable list within an HTML table cell.
down vote unaccept You can delete the rows after getting the data from the server
$.getJSON("/data/"+data, function(dataState) {
$("#data_table tr").remove();
//...
for(var data in dataState) {
var row = document.createElement("tr");
var list = document.createElement("ul");
for(var j = 0; j < data.length; j++) {
// Create the list item:
var item = document.createElement('li');
var dataName = data[j].name;
// Set its contents:
item.appendChild(document.createTextNode(dataName));
// Add it to the list:
list.appendChild(item);
}
// make a list scrollable and add to cell
cell.appendChild(list);
cell.className = "cellDiv";
list.className = "listScrollable";
tableRef.appendChild(row);
}
}
});
and the CSS:
.cellDiv {
height: 30px;
text-align: left;
vertical-align: top;
width: 10%;
font-family: Monaco;
font-size: larger;
background-color: whitesmoke;
}
.listSrollable {
width:20%;
overflow-y: scroll;
overflow: hidden;
font-family: Monaco;
background-color: white;
}
The issue may lie in conflicting styles between the cell and the scrollable list, but I’m unsure how to resolve it without further assistance.