I have a table that is filled dynamically with a csv file. I created a table that inside itself has dropdowns in some columns.
What I want to do now is to check if a value exists in the cell where the dropdown is supposed to be, if so to check if it exists in the dropdownlist if yes then set this as selected in dropdown list otherwise selected is at default value and the cell gets red margine around.
Here is a jsFiddle with an example as how my code currently looks like:
https://jsfiddle.net/r236uy5k/
EDIT : I corrected my jsfiddle:
https://jsfiddle.net/kcau7jhd/
$(function(){
var firstDDM = ['aaa','bbb','ccc','ddd'];
var firstshortcut = ['a','b','c','d'];
var option = "",
select = "";
for(var i=0; i<firstDDM.length;i++){
option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(3)").append(select);
});
});
$(function(){
var secondDDM = ['Default','AAA','BBB','B1','C'];
var secondshortcut = ['Default','a','b','b1','c'];
var option = "",
select = "";
for(var i=0; i<secondDDM.length;i++){
option += '<option value="'+ secondshortcut[i] + '">' + secondDDM[i] + '</option>';
}
select = '<select class="secondDDM" type="secondDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(5)").append(select);
});
});
$("#addRow").click(function(){
$("#my_id").each(function(){
var tds='<tr>';
jQuery.each($('tr:last th', this), function(){
tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
});
jQuery.each($('tr:last td', this), function(){
if($('select',this).length){
tds+= '<td>' + $(this).html() + '</td>';
}else{
tds+= '<td></td>';
}
});
tds+= '</tr>';
$('tbody',this).append(tds);
$('#my_id tbody tr:last').attr("contentEditable", true);
});
});
//for the columns that need to be imported with dropdowns create editable option - temporarlly
$(function() {
$("tr").each(function() {
$(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
});
});
//Find and remove selected table rows
$('#delete-row').click(function(){
var r = confirm('Are you sure you want to delete them all?');
$("tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
if(r == true){
$(this).parents("tr").remove();
}else{
return false;
}
}
});
});
table {
border-collapse: collapse;
border: 1px black solid;
font: 12px sans-serif;
width: 100%;
table-layout:auto;
}
td {
border: 1px black solid;
text-align: left;
padding: 2px;
}
thead:hover{
text-decoration: none !important;
}
thead tr:first-child{
color:white;
text-align: center;
background-color: #5bc0de;
padding: 10px;
}
tr:nth-child(even){
background-color: #f2f2f2
}
tr:hover{
background-color: #5bc0de;
}
button{
display: inline;
padding: 50px;
}
input button{
display: inline;
}
.dropbtn{
background-color: blue;
}
.table-responsive {
overflow-y: auto;
height: 800px;
}
.table-responsive table {
border-collapse: collapse;
width: 100%;
}
.table-responsive thead th{
position: sticky;
top: 0;
background-color: #5bc0de;
padding: 2px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.myButtons{
display: inline;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Filtered CSV File</title>
</head>
<body>
<h1>
Filtered CSV FIle
</h1>
<br/>
<br/>
<div class="myButtons">
<input type="button" value="Add new row" class="btn btn-info" id="addRow">
<input type="button" value="Delete rows" id="delete-row" class="btn btn-info">
</div>
<br/>
<div class="table-responsive">
<table class="dataframe my_class" id="my_id">
<thead>
<tr style="text-align:right;">
<th> </th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td></td>
<td>row1</td>
<td>B1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<th>2</th>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td></td>
<td>row2</td>
<td>AAA</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<th>3</th>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td></td>
<td>row3</td>
<td>C</td>
<td>row3</td>
<td>row3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You can edit the select text you are entering. Following are the things which I think you want to achieve:
Identify if the dropdown has a certain value and preselect them if possible.
If the dropdown does not have correct value for pre selection then mark them as error field.
If the above mentioned points are incorrect please let me know i will make the relevant changes which are required.
I have added a condition check if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) you can replace it with any condition that you want.
Replace the following jquery snippets
$("tr").each(function () {
var option = "",
select = "",
classObject = '',
isSelected = false;
if($(this).find("td:eq(3)")[0]){
for (var i = 0; i < firstDDM.length; i++) {
if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) {
option += '<option selected="selected" value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
isSelected = true;
}
else
option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
classObject = !isSelected ? 'errorDropDown' : '';
select = '<select class="firstDDM' + ' ' + classObject + '" type="firstDDM">' + option + '</select>'
$(this).find("td:eq(3)").append(select);
}
});
Add this class to the css file:
.errorDropDown {border: 1px solid red;}
I have hardcoded two values which display a green icon on the one which has online status and red icon on the one which is offline. Now i want it to automatically add the green icon in the table when my function is called.
<div class="col-md-8">
<table class="table table-bordered table striped " id="thinker_table" >
<thead class="thead-dark">
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
<th>Indicator</th>
<th>Show Routines</th>
<th>Show Devices</th>
</thead>
</tr>
<td>IPLConference Room</td>
<td>XXXXXXXXXXXXX</td>
<td >Online</td>
<td>
<div class="led-green"></div>
<td> <input type="button" value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<td> <input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<tr>
<td>Host_34F60E </td>
<td>XXXXXXXXXX</td>
<td >Offline</td>
<td>
<div class="led-red"></div>
</td>
<tfoot >
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
</tfoot >
</table>
</div>
</div>
</div>
This is my javascript below im displaying the result in a table. the table should display a green icon where the status = 1. As my condition is if status = 1 hence i should get green icon on all the table row.
$(document).ready(function(){
$.getJSON("test.json", function(data){
var thinker_data = '';
$.each(data.data, function(key, value){
if(value.status == "1")
{
thinker_data += '<tr>';
thinker_data += '<td>'+value.name+'</td>';
thinker_data += '<td>'+value.mac+'</td>';
thinker_data += '<td>'+value.status+ '</td>';
thinker_data += '</tr>';
}
});
$('#thinker_table').append(thinker_data);
});
});
</script>
The answer was helpful but now now i am getting the icon like this
also how do I add the two buttons as well in the table?
I'm not too sure I understand the question, but from what I've read, you want to display a green circle if the user has status=1. And you get that information from a json file.
Well you need to create the circles in css first!
Css:
.online {
height: 25px;
width: 25px;
background:green;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
.offline {
height: 25px;
width: 25px;
background:red;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
Then, when you create a new row, you had the "online" class to the column you want:
$.each(data.data, function(key, value){
if(value.status == "1")
{
thinker_data += '<tr>';
thinker_data += '<td>'+value.name+'</td>';
thinker_data += '<td>'+value.mac+'</td>';
thinker_data += '<td class="online"></td>';
thinker_data += '<td></td>' //to make the "Indicator" column space
thinker_data += '<td> <input type="button" value="Click Here" onclick="window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type="button" value="Click Here" onclick="window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>'
thinker_data += '</tr>';
}
});
Do note I've created a sample input because I do not have access to the "test.json" file.
Check the JSFiddle for a working example.
If you also wan't a red circle for status=0, use the offline class!
$(document).ready(function() {
var thinker_data = '';
let data = {
"data": [{
"name": "text",
"mac": "SOMETHIN5239321",
"status": "1"
}, {
"name": "tex2t",
"mac": "S23THIN5239321",
"status": "1"
}]
};
$.each(data.data, function(key, value) {
if (value.status == "1") {
thinker_data += '<tr>';
thinker_data += '<td>' + value.name + '</td>';
thinker_data += '<td>' + value.mac + '</td>';
thinker_data += '<td class="online"></td>';
thinker_data += '<td></td>' //to make the "Indicator" column space
thinker_data += '<td> <input type="button" value=\Click Here" onclick="window.open(\'RoutineDetails.php\',\'popUpWindow\',\'height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td><td> <input type="button" value="Click Here" onclick="window.open(\'DeviceDetails.php\',\'popUpWindow\',\'height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes\');"></td>';
thinker_data += '</tr>';
}
});
$('#thinker_table').append(thinker_data);
});
.online {
height: 25px;
width: 25px;
background: green;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
.offline {
height: 25px;
width: 25px;
background: red;
border-radius: 50%;
border: 1px solid;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-8">
<table class="table table-bordered table striped " id="thinker_table">
<thead class="thead-dark">
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
<th>Indicator</th>
<th>Show Routines</th>
<th>Show Devices</th>
</tr>
</thead>
<td>IPLConference Room</td>
<td>XXXXXXXXXXXXX</td>
<td>Online</td>
<td>
<div class="led-green"></div>
<td> <input type="button" value="Click Here" onclick="window.open('RoutineDetails.php','popUpWindow','height=500,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<td> <input type="button" value="Click Here" onclick="window.open('DeviceDetails.php','popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"></td>
<tr>
<td>Host_34F60E </td>
<td>XXXXXXXXXX</td>
<td>Offline</td>
<td>
<div class="led-red"></div>
</td>
<tfoot>
<tr>
<th>Thinker Name</th>
<th>MAC Address</th>
<th>Status</th>
</tfoot>
</table>
</div>
EDIT:
I've edited the code and the snippet to repeat your buttons in every column. I think this is not the best solution, but you're not being very clear on what's your goal/what's your evironment.
I'm don't entirely follow the chain of events in this question, and where you are at now, but from what I gather you want to know how you can add buttons into your table with valid function calls onClick?
I prefer to use template strings when writing out html in javascript and just interpolating variables. Looks very clean
$(document).ready(function(){
$.getJSON("test.json", function(data){
var thinker_data = '';
$.each(data.data, function(key, value){
if(value.status == "1")
{
thinker_data += `
<tr>
<td>${value.name}</td>
<td>${value.mac}</td>
<td>${value.status}</td>
<td>
<button onClick="location.href='https://www.example.com'">Click Me</button>
</td>
<td>/* Or an interpolated url in case it should be dynamic */</td>
<td>
<button onClick="location.href='${interpolatedUrl}'">Click Me</button>
</td>
</tr>
`;
}
});
$('#thinker_table').append(thinker_data);
});
});
</script>
I have created a table and I want to add the data below the table but data is being added at the top,
I have written a search property when user enters the product id the data should be shown and can't figure out where my code went wrong,
I want to add serch field to all the buttons should I write the code many times is there any solution?
$(document).ready(function() {
var url = "http://34.201.147.118:3001/getAllData";
$.getJSON(url, function(data) {
console.log(data);
//console.log("AllData")
var obj = data['AllData'];
//console.log(obj)
for (var i = 0; i < obj.length; i++) {
var tr = "<tr>" +
"<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child"> tr</tr>');
}
});
});
function goodCall() {
$(document).ready(function() {
$("#id").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
body {
background-image: url("banner.jpg");
background-size: 100%;
}
#mytable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
}
#mytable td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#mytable tr:hover {
background-color: #ddd;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page Content -->
<div style="margin-left:25%">
<h1 style="color:white;">TITLE DETAILS</h1>
<div class="w3-container" id="add">
<div class="" style="color:white;">
<form name="test_form" id="101">
<table class="table borderless">
<tr>
<th>Title Identifier</th>
</tr>
<tr>
<td style="border:none">
<b>PRODUCT ID</b>
<br>
<input type="text" id="id" style="color:black;" required></td>
<td style="border:none"></td>
<td style="border:none">
<b>PRODUCT TITLE</b>
<br><input type="text" id="title" style="color:black;" required></td>
</tr>
<tr>
<td style="border:none">
<br> <b>director </b>
<br> <input type="text" id="ter" style="color:black;" required>
</td>
<td style="border:none"></td>
<td style="border:none">
<b>producer</b>
<br> <input type="text" id="media" style="color:black;" required>
</td>
</tr>
</table>
</form>
<input type="button" onclick="goodCall()" value="Search" style="color:Red;">
<table id='mytable'>
<tr>
<th>ID</th>
<th>PRODUCTTITLE</th>
</tr>
<div>
<br><br>
</div>
</table>
</div>
</div>
</div>
Here you have a basic functional example https://jsfiddle.net/0Lvqcd8t/39/
You should change this:
var tr = "<tr>" +
"<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child"> tr</tr>');
for this:
var tr = "<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child">'+ tr+'</tr>');
In the first case you are creating <tr><tr class="child><td></td></tr> (first <tr> is wrong) and browser will render something like <tr>tr</tr><tr class='child'>empty</tr> also, tr var in first example is not interpreted as variable, so you should place it like +tr+. I've made a basic filter function at the end that works with id.
I want to append rows to the table one by one, not all at once. Problem i'm facing is, no. of rows is very large, say 10,000. It append all the rows at once after loop terminates. I want it to work like, with each iteration, it should append the row to the table.
$(document).ready(function(){
for(var i=0;i<1000;i++){
var name = "name "+i;
var email = "email"+i+"#vvv.com";
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
//$("table tbody").append(markup);
//$("tbody").parent("table").append(markup);
$("tbody").after(markup);
}
});
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Name</td>
<td>email#vvv.com</td>
</tr>
</tbody>
</table>
I see what you are trying to do. You may try to use setTimeout to achieve this. You are trying to loop an array but in your code you are just generating new rows. So I tried to implement your code into this solution. If you are trying to loop an array you need to modify this.
$(document).ready(function(){
appendOneByOne(1000)
});
function appendOneByOne(i){
if(i !== 0){
setTimeout(function(){
var name = "name "+i;
var email = "email"+i+"#vvv.com";
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("tbody").after(markup);
appendOneByOne(--i)
});
}
}
You can also use window.requestAnimationFrame(); but take care for cross-browser issues.
How can the code be modified below to dynanically generate the results of my SQL query to a table that would like the example table below? (2 items per table row)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
try {
alert("running function test")
var cn = new ActiveXObject("ADODB.Connection")
var rs = new ActiveXObject("ADODB.Recordset")
var sql = "SELECT * FROM tbl_rssims"
var db = "G:\\AS\\Asf\\ASF\\RSSIMS\\db\\rssims.mdb"
cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + db + "")
rs.Open(sql, cn, 1, 3)
var html = '<!DOCTYPE html>\n'
html += '<html>\n'
html += '<head>\n'
html += '<table style="border: none; table-layout: fixed; width: 100%; text-align: left;" cellpadding="0" cellspacing="0">\n'
//<!-- WRITE FIELD VALUES -->
while (!rs.eof) {
html += '<tr>\n';
for (var c = 0; c < rs.fields.count; ++c) {
html += '<td>' + rs.fields(c).value + '</td>\n'
}//end of for
html += '</tr>\n'
rs.movenext
}//end of while
html += '</table>'
window.open('','').document.write(html)
rs.close
cn.close
}//end of try
catch(e) {
alert(e.description)
}
}//end of function
</script>
</head>
<body>
<b>Example:</b>
<table style="border: none; table-layout: fixed; width: 100%; text-align: left;" cellpadding="0" cellspacing="0">
<tr>
<td>Mr. Ronald McDonald<br>Chief Executive Officer<br>The Hudson Bay Corporation<br>123 Yahoo Street<br>Toronto, Ontario<br>Canada</td>
<td>Mr. Steve Marin<br>Chief Executive Officer<br>General Motors<br>456 Don Mills Street<br>Toronto, Ontario<br>Canada</td>
</tr>
</table>
<input onclick="test()" type="button" value="button" id="button">
</body>
</html>
How about this:
html += '<tr><td>' + rs.GetString(2, -1, '<br>', '</td><td>', '') + '</td></tr>';
You want <br> between each column, and </td><td> between each row.
try something like this..
<php?
$query='select * from table_name';
$result=mysql_query($query);
?>
<table>
<tr>
<th>ID </th>
<th>Name</th>
</tr>
<?php
while($row=mysql_fetch_assoc($result)){
echo '<tr>
<td align="center">'.$row['id'].'-'.$row['sID'].'</td>
<td align="center">'.$row['name'].'</td>
</tr>';
}
?>
</table>