guys i have a stupid question here.
i'm using bootstrap.min.js for showing a data into a table.
but it has an unwanted td showing at my last row. how i can clear that unwanted td that showing at the last row in my table?
anyone have any answer for my question? please help me for solve this.
this my code for showing the data or created the table
script type="text/javascript">
$(document).ready(function(){
$('#submit-file').on("click",function(e){
e.preventDefault();
$('#files').parse({
config: {
delimiter: "",
complete: displayHTMLTable,
},
before: function(file, inputElem)
{
//console.log("Parsing file...", file);
},
error: function(err, file)
{
//console.log("ERROR:", err, file);
},
complete: function()
{
//console.log("Done with all files");
}
});
});
function displayHTMLTable(results){
var table = "<table class='table table-bordered'>";
var data = results.data;
for(i=0;i<data.length;i++){
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</td>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<div class="container" style="padding:5px 5px; margin-left:5px">
<div class="well" style="width:70%">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="files">Upload File Data :</label>
<input type="file" id="files" class="form-control" accept=".csv" required />
</div>
<div class="form-group">
<button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
</div>
</form>
</div>
<div class="row">
<div id="parsed_csv_list" class="panel-body table-responsive" style="width:800px">
</div>
</div>
</div>
<div id="footer"></div>
</div>
and this is the unwanted tr and td showing
this that i have got when i check it with inspect element
i try editing my code to this
function displayHTMLTable(results){
var table = "<table class='table table-bordered'>";
var data = results.data;
for(i=0;i<=data.length;i++){
if(data[i].trim().length > 1)// check added here
{
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</td>";
}
table+= "</tr>";
}
else {
}
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
});
You will need to check the number of columns you have:
function displayHTMLTable(results){
var table = "<table class='table table-bordered'>";
var data = results.data;
var size = -1;
for(i=0;i<data.length;i++){
var row = data[i];
var cells = row.join(",").split(",");
if (cells.length < size) continue;
else if (cells.length > size) size = cells.length;
table+= "<tr>";
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</td>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
Related
Night all.
I have a question here. I have a table that created by javascript function I made. In that table contain a checkbox in each row and the thead has the checkbox too. I have separate the id's of the checkbox for the each row use id mycheckbox and for the thead use id mycheckbox1.
OK now to the problem.
I have to try to make all of my checkbox can be checked with the checkbox in the thead with id mycheckbox1. I have try many code that I have found. But no one working. And I try make a fiddle with a table that I manually created with HTML and I can check all the texboxt and it work fine like this fiddle https://jsfiddle.net/minervaz/29fnt79f/1/
But when I try to use that in my page it can't work
this is the code for the table that I have created
$(document).ready(function(){
$('#submit-file').on("click",function(e){
if ($('#files').val()== "")
{
alert("Anda Harus Memasukkan File Terlebih Dahulu");
}
else{
e.preventDefault();
$('#files').parse({
config: {
delimiter: "",
skipEmptyLines: false,
complete: displayHTMLTable,
},
before: function(file, inputElem)
{
//console.log("Parsing file...", file);
},
error: function(err, file)
{
//console.log("ERROR:", err, file);
},
complete: function()
{
//console.log("Done with all files");
}
});
}
});
function displayHTMLTable(results) {
var table = "<table class='table table-bordered' width='90%'>";
var data = results.data;
var size = -1;
var check = 7;
var header = "<thead><tr>";
header+= "<th width='120'>Kode Material</th>";
header+= "<th width='140'>Storage Location</th>";
header+= "<th width='130'>Movement Type</th>";
header+= "<th width='130'>Id Indentifier</th>";
header+= "<th width='120'>Date Input</th>";
header+= "<th width='80'>Netto</th>";
header+= "<th width='50'>Unit</th>";
header+= "<th width='80'>Payroll</th>";
header+= "<th><input type='checkbox' id='mycheckbox1' name='mycheckbox1' ></th>";
header+= "</tr></thead>";
table += header;
table+="<tbody>";
for (i = 1; i < data.length; i++) {
table += "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
if (cells.length < size) continue;
else if (cells.length > size) size = cells.length;
if (cells.length > check){
alert('Data Yang Anda Masukkan Salah');
}
else{
for (j = 0; j < cells.length; j++) {
var a = 1.000;
var b = 10.000;
var c = 20.000;
var d = 45.000;
var callback1 = '10.000';
var callback2 = '20.000';
var callback3 = '37.500';
var callback4 = '45.000';
table += "<td>";
table += cells[j];
table += "</td>";
}
if (cells[5]> a && cells[5] <b){
table += "<td>"+ callback1 +"</td>"
}
else if (cells[5]> b && cells[5] <c){
table += "<td>"+ callback2 +"</td>"
}
else if (cells[5]> c && cells[5] <d){
table += "<td>"+ callback3 +"</td>"
}
table += "<td><input type='checkbox' id='mycheckbox' name='mycheckbox'></td>"
table += "</tr>";
}
}
table+="</tbody>";
table += "</table>";
$("#parsed_csv_list").html(table);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.min.js"></script>
<div class="container" style="padding:5px 5px; margin-left:5px">
<div class="well" style="width:70%">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label for="files">Upload File Data :</label>
<input type="file" id="files" class="form-control" accept=".csv" required />
</div>
<div class="form-group">
<button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
</div>
</form>
</div>
</div>
<div class="row" style="width:90%">
<form action="" id="form_data" name="form_data" method="post">
<div id="parsed_csv_list" class="panel-body table-responsive" style="width:90%">
</div>
</form>
</div>
After I can checked my checkbox I want to make a new th column in the last row of the thead and in the last row of the each tbody.
The value of the column is Tilting when it checked and Borongan when unchecked.
for the csv file you can download in this link
https://drive.google.com/open?id=0B_zAPPvH-idZZkxSRDI4NGNHOHc
The problem you are having is the element you are setting change event to is not present at the time of binding, so you will have to set it on a element which is present. I could give you the answer but that won't help in long run.As I am not a very good at explaining concepts I will just point you to the problem you are having with answer in it -
jQuery .on('change', function() {} not triggering for dynamically created inputs
For second part research more. (Also I did not understand)
On my HTML page, there is a table inside a form. The table's first row is the labels of the columns, and the rest of the rows contain input text fields.
Under the table, there is a button which operates a JavaScript function which duplicates the first row at the end of the table.
The problem is that the text is also copied from the first row fields to the newly added row fields. Instead, I want to clear the text from the newly added row fields. How can I do that?
This is my code:
<form action="update.php" method="post" enctype="multipart/form-data">
<table id="addresses" class="form" border="1">
<tbody>
<tr>
<p>
<th>
</th>
<th>
<label for='UPDATE_NAME'>Name</label>
</th>
<th>
<label for='UPDATE_NUMBER'>Phone Number (With Country Code)</label>
</th>
<th>
<label>Address (House No., Street, City, State, ZIP Code, P.O. Box)</label>
</th>
</p>
</tr>
<?php
for ($i = 0; $i < count($addresses); $i++) {
$id = str_pad($i, 2, '0', STR_PAD_LEFT);
echo "<tr>";
echo "<p>";
echo "<td>";
echo "<input type='checkbox' name='chk[]' />";
echo "</td>";
echo "<td>";
echo "<input type='text' name='UPDATE_NAME[]' value='".$names[$id]['S']."' />";
echo "</td>";
echo "<td>";
echo "<input type='tel' name='UPDATE_NUMBER[]' value='".$numbers[$id]['S']."' />";
echo "</td>";
echo "<td>";
echo "<input type='text' name='UPDATE_ADDRESS[]' value='".$addresses[$id]['S']."' />";
echo "</td>";
echo "</p>";
echo "</tr>";
}
?>
</tbody>
</table>
<p>
<input type="button" value="Add Address" onClick="addRow('addresses')" />
</p>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 10) {
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
}
document.getElementById("APP_UPDATE_NAME[" + rowCount + "]").reset();
} else {
alert("Maximum Branches Number is 10");
}
}
</script>
<input type="submit" class="flat-button form" name="SUBMIT" value="Update Addresses" />
</form>
In the code above, you can see the first row with the labels, and after that, a PHP loop that adds information from a PHP array. After the table, you can see the JavaScript function which adds a row to the table.
What do I need to add to the script so it would be copied without the text from the input fields?
You can set the value of the new row manually instead of copying it. Like so:
newcell.innerHTML = "<input type='...' name='...' value='...' />";
This way you control what goes into the newcell.
I have written a very simple code
<!DOCTYPE html>
<html>
<body>
<table id="myTable" border = "1"></table>
<script>
for(var i = 1; i<=5; i++){
var tableRow = "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
</script>
</body>
</html>
I want to generate a table like this code snippet
<table border = "1">
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
<tr>
<td>JS Table</td>
</tr>
</table>
But it's giving only one row while I have set for loop for 5 times. How to solve this.
I am facing one more problem. If I write javascript in head tag, I don;t get any output & it's saying "document.getElementById("myTable").innerHTML" is null. How to rectify it?
<!DOCTYPE html>
<html>
<head>
<script>
for(var i = 1; i<=5; i++){
var tableRow = "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
Problem 1
The problem is that you are overriding your tableRow again and again in the for loop. So, you need to move that outside the for loop. You will need to update your script to
var tableRow = ""; // moved outside the loop
for(var i = 1; i<=5; i++){
tableRow += "<tr>"; // appending <tr>
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
Problem 2
The issue is coming because you are trying to execute the code before the dom is rendered. Try it wrap it inside the onload function i.e.
window.onload = function(){
// your code here
};
For reference - https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var tableRow = "";
for(var i = 1; i<=5; i++){
tableRow += "<tr>";
tableRow += "<td>" + "JS Table" + "</td>";
tableRow += "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
};
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
var tableRow="";
for(var i = 1; i<=5; i++){
tableRow += "<tr>";
tableRow+= "<td>" + "JS Table" + "</td>";
tableRow+= "</tr>";
}
document.getElementById("myTable").innerHTML = tableRow;
<table id="myTable"></table>
<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.
I want to add static drop downlist to every row of dynamic table which fetch the data from server, How I will do this?
I want to make same like this,(please check drop downlist type) but it will also fetch data from server and every row of column will have drop drownlist.
Following is updated and working code, thanks to #angu
Structure of drop down list.
<select >
<option value="1">NewJob</option>
<option value="2">InProgress</option>
<option value="3">CloseJon</option>
</select>
Dynamic Table
<div class="span9" id="content">
<div class="row-fluid">
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts1-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
JavaScript
<script>
function fetchData1(){
$(".data-contacts1-js tbody").empty();
$.get("http://localhost/service/Services.php", function(data) {
var obj=JSON.parse(data);
for(var i in data){
var tr=$("<tr></tr>");
tr.append(
"<td>" + obj[i].b_id + "</td>" +
"<td>" + obj[i].cust_name + "</td>" +
"<td>" + obj[i].cust_mobile + "</td>" +
"<td>" + obj[i].cust_email + "</td>"
);
tr.append("<select class='input-small'><option value='New Job'>NewJob</option><option value='WIPJob'>WIP Job</option></select>");
$(".data-contacts1-js tbody").append(tr);
i++;
}
});
}
$(document).ready(function(){
$(".data-contacts1-js tbody").empty();
$('#fetchContacts1').click(function() {
fetchData1();
});
});
</script>
use it. i think this is helpful for you
Jquery Code Generate Dynamic append Row:
$(function(){
for(var i=0;i<3;i++){
var trd="";
trd +="<tr>";
trd +="<td>";
trd+="<select class='input-small'><option value=''>Type</option><option value=''>Type1</option></select>";
trd+="</td>";
trd+="<td><input type='text'> </td>";
trd+="<td><input type='text'> </td>";
trd+="</tr>";
$(".table-bordered tbody").append(trd);
}
});
Click To Demo
Here are couple createSelect functions that could work in your case. Plain JavaScript is used in those functions :-)
$("body").append("createSelect() ");
$("body").append("<br>");
$("body").append(createSelect());
$("body").append("<br><br><br>");
$("body").append(" createSelectDynamic() ");
$("body").append("<br>");
var array = [{
"value": 1,
"text": "NewJob"
}, {
"value": 2,
"text": "InProgress"
}, {
"value": 3,
"text": "CloseJob"
}]
$("body").append(createSelectDynamic(array));
$("body").append("<br><br><br>");
$("body").append("miniTable where createSelect() used ")
$("body").append("<table><tr><td><td>2nd<td>third");
var select = createSelect();
$("td:first-child").append(select);
function createSelect() {
var select = document.createElement("select");
var option = document.createElement("option");
option.value = 1;
option.text = "NewJob";
select.add(option);
var option2 = document.createElement("option");
option2.value = 2;
option2.text = "InProgress";
select.add(option2);
var option3 = document.createElement("option");
option3.value = 3;
option3.text = "CloseJob";
select.add(option3);
return select;
}
function createSelectDynamic(values) {
var select = document.createElement("select");
for (i = 0; i < values.length; i++) {
var option = document.createElement("option");
option.value = values[i].value;
option.text = values[i].text;
select.add(option);
}
return select;
}
table, th, td {
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>