I am dynamically creating a table and I want the column widths to shrink/expand to the size of the contents. I have tied:
#parTable tr td {
width: 1%;
white-space: nowrap;
}
And when creating the rows:
html += "<tr>"
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='patparId' value='' disabled></td>";
html += "<td style='width : 1%; white-space: nowrap;'><select name='parRating'>"
for (let i = 0; i <= paraArray; i++) {
html += "<option name='parRatingOption' data-index='" + i + "' value='" + parIdArray[i] + "'>" + parRatingArray[i] + "</option>"
};
html += "</select></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='startDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='date' name='endDate' value=''></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='text' name='parDescription' class='fullWidth' value='" + parDescriptionArray[0] + "'></td>";
html += "<td style='width : 1%; white-space: nowrap;'><input type='button' name='addPARbtn' class='btn-info' value='Add'></td>";
html += "</tr>";
The table is:
<!-- PAR table -->
<table class="table table-hover table-bordered" id="parTable">
<thead>
<tr>
<th>patparId</th>
<th>PAR</th>
<th>Start Date</th>
<th>End Date</th>
<th>Description</th>
</tr>
</thead>
<tbody id="parTablebody">
<tr>
<!-- Place for PAR details -->
</tr>
</tbody>
</table>
This is the resulting table:
Related
I am trying to create a button to delete a row in my table from the firebase database but I am not sure how to choose one specific row to delete using a button function. I am using javascript and firesource.
The function that i am using to fill my table is
function filled_table_start(num){
document.getElementById("tbody1").innerHTML = "";
members.forEach((member) => {
if(member.exists()){
row += '<tr id="student'+ (count+1) +'" >';
row += '<td>' + (count+1) +'</td>';
row += '<td>' + member.data().studentID + '</td>';
row += '<td>' + member.data().name + '</td>';
row += '<td>' + member.data().gender + '</td>';
row += '<td>' + member.data().schoolEmailAdd + '</td>';
row += '<td>' + member.data().handphoneNum + '</td>';
row += '<td><button type="button" onclick= "' + deleteDoc(doc(db,this.studentID ))+'" >Delete User</td>';
//row += '<td>' +
row += '</tr>';
document.getElementById('tbody1').innerHTML += row;
count ++;
};
});
}
I am wondering if something like this.deleteDoc will work? or is there another function that can be used to delete a specific row?
I just created a dummy demo table here. What I did is, simply give a class to each of the buttons, when you will click on the button, It will find the closest tr and remove it.
$("#tbody1").on('click', '.deleteDoc', function () {
$(this).closest('tr').remove();
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="tbody1">
<tr>
<th>Sl</th>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Mail</th>
<th>Mobile</th>
<th>Action</th>
</tr>
<tr id="student1">
<td>1</td>
<td>11</td>
<td>ABC</td>
<td>F</td>
<td>abc#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
<tr id="student2">
<td>2</td>
<td>12</td>
<td>DEF</td>
<td>M</td>
<td>def#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
<tr id="student3">
<td>3</td>
<td>13</td>
<td>IJK</td>
<td>F</td>
<td>ijk#gmail.com</td>
<td>123456</td>
<td><button type="button" class="deleteDoc"> Delete User </td>
</tr>
</tbody>
</table>
I have a html code and it it working fine for small json file and showing data in html table properly. But my problem is now that i have a big json file around 15000 html table row. So my page is not responding. How can i break 100 result per page till last result. I am sharing my html code.Please add some code in my html file and paste in answer section
<html>
<header><title>Welcome</title></header>
<body>
<!--javascript make append table data-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#userdata tbody").empty();
$(function() {
var user = document.getElementById("userId").value;
var category = location.search.split('id=')[1]
$.getJSON('abc.php',{"userId":user,"categoryId":category}, function(data) {
$.each(data.videos , function(i, v) {
var link = "youtube.php?id=youtu.be/"+ v.video;
var tblRows = "<tr>" + "<td>" + v.videoName + "</td>" + "<td>" + v.date + "</td>" +"<td>"+ v.time + "</td>" + "<td>" + v.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+"WATCH/DOWNLOAD"+"</a></td>" + "</tr>";
$(tblRows).appendTo("#userdata tbody");
});
});
$.getJSON('crp.php',{"userId":user,"categoryId":category}, function(data) {
$.each(data.other , function(i, f) {
var link =f.pdf;
tblRows2 = "<tr>" + "<td>" + f.dateText + "</td>" + "<td>" + f.textMessage + "</td>" + "<td><a target='_blank' href='"+link+"'>"+"Click here to Download"+"</a></td>" + "</tr>";
$(tblRows2).appendTo("#userdata2 tbody");
});
});
});
</script>
<!--javascript append table data ended -->
<!-- user form -->
<form>
<input id='userId' type="hidden" value="500" placeholder="Enter Your User Id" name="userId" autofocus required>
</form>
<!-- user form -->
<!--table-->
<h1>VIDEO LIST</h1>
<!--<style>
.wrapper {
table tr td:nth-child(5) {
background: white;
}
}
.profile {
table, th, tr {
border: 5px solid green;
background:5px black;
color: white;
font-weight: bold;
}
}
}
</style>-->
<!--<style>
.button {
border: 5px solid green;
background:5px black;
color: white;
font-weight: bold;
tr:nth-of-type(odd) {
background: #eee;
}
}
</style>-->
<table class="button" id= "userdata" width="100%" border="20">
<thead>
<th>VIDEO NAME</th>
<th>DATE</th>
<th>TIME</th>
<th>DURATION</th>
<th>LINK</th>
</thead>
<tbody>
</tbody>
</table>
<!--table data end-->
<!--table-->
</body>
<body>
<style>
table tr td:nth-last-of-type(1) {
background: white;
}
table, th, tr {
border: 5px solid green;
background:5px black;
color: white;
font-weight: bold;
}
</style>
<h1>PDF LIST</h1>
<div class="wrapper2">
<div class="profile2">
<table id= "userdata2" width="100%" border="20">
<thead>
<th>DATE</th>
<th>NAME</th>
<th>LINK</th>
</thead>
<tbody>
</tbody>
</table>
</tr>
</div>
</div>
</body>
</html>
you have multiple options
1-use pagination like 1,2,3,4,etc
->this can be done using js and php or php with sql setting limit on your query and shift it when you choose another page
2-lazy loading on scroll -> this can be done using js
example using php with my sql
https://www.tutorialspoint.com/php/mysql_paging_php.htm
I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN
<html>
<head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:400px;
float:left;
padding:10px;
}
section {
width:600px;
float:right;
padding:10px;
}
</style>
</head>
<body>
<header>
<h1>Generate your own query</h1>
</header>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript">
var i=0;
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('result.json', function(jd) {
$('#stage').empty();
$('#stage').append('<p class="selected first"> Queries: ' + jd.queries_status+ '</p>');
var $tthead=$("#usertable thead");
//$tthead.html ="";
/* var theaddata="";
theaddata += "<tr>";
theaddata += "<th>" + query_id + "</th>";
theaddata += "<th>" + query_status + "</th>";
theaddata += "<th>" + query_result_number + "</th>";
theaddata += "<th>" + query_results + "</th>";
theaddata += "<th>" +action + "</th>";
theaddata += "</tr>";
$tthead.append(theaddata);*/
var $tbody = $("#usertable tbody");
$tbody.html("");
var tabledata = "";
for(i = 0; i < jd.list_of_queries.length; i++ ){
tabledata = "";
tabledata += "<tr>";
tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>";
tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>";
tabledata += "<td>" +jd.list_of_queries[i].query_results_number + "</td>";
tabledata += "<td>" +jd.list_of_queries[i].query_results + "</td>";
tabledata += "<td>" + '<input type="button" value="details" onclick= "display(this)" name=" '+jd.list_of_queries[i].query_id+' " />' + "</td>";
tabledata += "</tr>";
$tbody.append(tabledata);
}
});
});
});
function display(value) {
$.getJSON('result.json', function(jd) {
var $tdetail = $("#detail tbody");
$tdetail.html("");
var tabledetail = "";
for(i = 0; i < jd.list_of_queries[value.name-1].list_of_tasks.length; i++ ){
tabledetail = "";
tabledetail += "<tr>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_id + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_status + "</td>";
tabledetail+= "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_operation + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].number_of_hits + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].finished_hits + "</td>";
tabledetail += "<td>" + jd.list_of_queries[value.name-1].list_of_tasks[i].task_result_number + "</td>";
tabledetail +="</tr>";
$tdetail.append(tabledetail);
}
});
}
</script>
</head>
<section>
<div id="stage1" >
Please enter your query <input type="text" name="query" size="50">
</div>
<div id="stage">
</div>
<br />
<input type="button" id="driver" value="submit query" formaction="http://localhost/queryexample.html"/>
<br />
<br />
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<thead>
<tr>
<th>query id</th>
<th>query status</th>
<th>query result_number</th>
<th>query results</th>
<th>action</th>
</tr>
</thead>
<tbody> </tbody>
</table>
<br />
<form>
<input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html" >
</form>
</section>
<nav>
<table id="detail" border="1" cellpadding="5" cellspacing=0>
<tbody> </tbody>
</table>
<br />
</nav>
currently, I create the table at the initial page, with the thead of the table. Is it possible to make the thead and the tbody of the table inside the getJSON function? thanks in advance.The comment code is what I tried before, but it does not work, hope somebody could revise.
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>