I have some code (as below) that allows me to open and display a csv file in Firefox from a location on my hard drive. I'd like to add a search box so it will filter the list when text is entered. I've seen some other working examples that had the table data stored between tags, but I can't get this to work when it's pulling the data from an external file location. I'm really new to JavaScript and this is a bit over my head so if anyone has any pointers i'd appreciate it..
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Try this solution :
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
var searchKey = "";
function myFunction(e){
searchKey = e.value;
}
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
if(!cell_data[cell_count].includes(searchKey) && cell_count == 0){
break;
}
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Keep in mind that this solution only works if you're going to search within the first column only
Related
Before I linked bootstrap to html file, the buttons were working. I got "uncaught typeerror cannot read property addeventlistener" error. after linking to bootstrap. I fixed the error after reviewing previous suggestions by linking jQuery and using $(document).ready() method. There are three buttons. First one to change color. The second one is to switch the list. The last one is to do a multiplication. Both first one and the third buttons are working except the second one. The style.css is saved in a separate file.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="container">
<div class="row">
<body>
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var btnSwitch = document.body.children[1].children[2];
var colorlist = document.body.children[1].children[0];
var animallist = document.body.children[1].children[1];
$(document).ready(function () {
btnSwitch.addEventListener("click", function (e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
});
$(document).ready(function () {
var btnChange = document.getElementById("change-color");
btnChange.addEventListener("click", function (e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
});
var btnMultiply = document.getElementById("multiply");
var inputValue1 = document.getElementById("value1");
var inputValue2 = document.getElementById("value2");
btnMultiply.addEventListener('click', function (e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
</script>
</body>
</html>
I appreciate your feedback.
Thanks
I used $(documnent).ready() to fix 2 errors out of three. I couldn't solve the third error by using the same method.
In your code snippet you only loaded the CSS of Bootstrap and this should not interfere with your JQuery. I don't know what did cause your issue, but my guess is you made some changes in your HTML structure and this interfered with how you have set up the manner in which to return page elements:
var btnSwitch = document.body.children[1].children[2];
The danger of selecting your elements this way is that a small change in your HTML can break it. Unless you specifically want to target a child or parent of a given element, the better way would be to use:
var btnSwitch = document.getElementById('switch-list')
It's also much easier to read code! Since you already use getElementById() in other parts of your code, I assume you know how it works.
Moving on.
You use $(document).ready(function () { ... }) twice in your code. Shouldn't be an issue, but if the first ready() method throws an error, the second block will not be executed. So if there is no specific need for it, just declare it once. And define your vars inside the (nameless) function, if you're using it.
You also have a mistake in your HTML, having div elements before the open <body> tag, but this might happened when you copied your code in your question.
Fixed example
$(document).ready(function() {
var btnSwitch = document.getElementById('switch-list')
var colorlist = document.getElementById('colorlist')
var animallist = document.getElementById('animalist')
var btnChange = document.getElementById("change-color")
var btnMultiply = document.getElementById("multiply")
var inputValue1 = document.getElementById("value1")
var inputValue2 = document.getElementById("value2")
btnSwitch.addEventListener("click", function(e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
btnChange.addEventListener("click", function(e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
btnMultiply.addEventListener('click', function(e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I'm extremely new to HTML, CSS and jQuery and I'm trying to make a simple table which accepts user input, stores it in rows of my table in HTML and therefore generates a delete button in each row. Problem is that I cannot get it to work even though I follow the tutorials of my class as well as the YT tutorials step by step. So far my code is:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
jquery #.js:
$document.ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
$("rembtn").click(function(){
$(this).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
$("#myTable tbody").append(blankRow);
}
});
}
else{
alert("Error: Please provide input for all fields")
}
});
});
I'd greatly appreciate any help on this matter.
I got it working.
The problem you have is you used $document instead of $(document)
Also for your delete function, you can use an inline onclick function.
$(document).ready(function(){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
$("#regbtn").click(function(){
var btitle = $("#bookTitle").val().trim();
var byear = $("#bookYear").val().trim();
if(btitle!="" && byear!=""){
if($("#myTable tbody").children().children().length==1){
$("#myTable tbody").html("");
}
var addRow = "<tr><td>"+btitle+"</td><td>"+byear+"</td><td><button class='rembtn' onclick='remove(this)'>Delete Row</button></td></tr>";
$("#myTable tbody").append(addRow);
$("#btitle").val("");
$("#byear").val("");
//rembtn function to remove the row and its contents
}
else{
alert("Error: Please provide input for all fields")
}
});
});
function remove(elem){
$(elem).parent().parent().remove();
if($("#myTable tbody").children().children().length==0){
var blankRow = "<tr><td>Nothing to display</td></tr>";
$("#myTable tbody").append(blankRow);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/index.js"></script>
<title>Welcome to our library!</title>
</head>
<body>
<div class="container">
<h1>Input your Favourite Book's Information</h1>
<p Make sure that all information is valid></p>
</div>
<div class="row">
<div class="indic">
<input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
</div>
<div class="indic">
<input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
</div>
</div>
<div class="row1">
<div class="colName">
<table id="myTable" class="tableStruc table-bordered">
<thead>
<tr>
<th scope="col">Book Title</th>
<th scope="col">Year of Publication</th>
</tr>
</thead>
<tbody>
<!--Table data will be input here-->
</tbody>
</table>
</div>
<button type="button" id="regbtn" class="btn btn-success">Register Book</button>
</body>
</html>
trying to set crud with incodeigniter. I have never done it so I don't understand where I have gone wrong. I am able to insert data into the database and the insert data window is shown. I attached a picture of the result. The data gets retrieved from the database but not loaded into the table.
Result:
CONTROLLER
function get($id = null){
$this->load->model('model_peca');
$this->load->model('model_perfil');
// $this->load->view('telas/pecas/view_addvalue');
if ($id !=null) {
$data = $this->model_peca->getData($id);
} else {
$data = $this->model_peca->getData();
}
$dados ['telaativa'] = 'pecas';
$dados ['tela'] = 'pecas/view_addvalue';
$this->load->view('view_home', $dados);
echo json_encode($data->result_object());
}
function edit($id){
$this->load->model('model_peca');
$data = $this->model_peca->getData($id)->result_object();
// }
// else{
$this->load->view('telas/pecas/view_edit',array('data'=>$data));
// }
}
function add(){
//$this->load->view('insert');
$this->load->model('model_peca');
$this->load->view('telas/pecas/view_insert');
}
function insert(){
$this->load->model('model_peca');
if ($this->input->post()) {
$peca_parent_id = $this->input->post('peca_parent_id');
$nr_peca = $this->input->post('nr_peca');
//echo $peca_parent_id;
// die;
$insert = $this->model_peca->insert($peca_parent_id,$nr_peca);
if ($insert > 0) {
$result = 200;
}
else{
$result = 0;
}
echo json_encode(array("result"=>$result));
}
}
function deleteoperacao($id){
$delete = $this->model_peca->delete($id);
if ($delete > 0) {
$result = 200;
}
else{
$result = 0;
}
echo json_encode(array("result"=>$result));
}
function update($id){
if ($this->input->post()) {
$peca_parent_id = $this->input->post('peca_parent_id');
$nr_peca = $this->input->post('nr_peca');
// echo $barang;
$insert = $this->model_peca->update($id,$peca_parent_id,$nr_peca);
if ($insert > 0) {
$result = 200;
}
else{
$result = 0;
}
echo json_encode(array("result"=>$result));
}
}
MODEL
function getData($id =null){
if ($id ==null) {
$data = $this->db->get('peca_value');
}
else{
$data = $this->db->get_where('peca_value',array('id'=>$id));
}
return $data;
}
function insert($peca_parent_id,$nr_peca){
$data = array('peca_parent_id'=>$peca_parent_id,'nr_peca'=>$nr_peca);
return $this->db->insert('peca_value', $data);
}
function update($id,$peca_parent_id,$nr_peca){
$data = array('peca_parent_id'=>$peca_parent_id,'nr_peca'=>$nr_peca);
$where = array('id'=>$id);
return $this->db->update('peca_value', $data,$where);
}
function delete($id){
$where = array('id'=>$id);
return $this->db->delete('peca_value',$where);
}
}
VIEW
<head>
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="assets/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="content-wrapper">
<section class="content-header">
<h1>Lista Peças
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li>Peças</li>
<li class="active">Lista pecas</li>
</ol>
</section>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<button class="btn btn-primary btn-act" data-name='add' href="<?php echo base_url('Home/add') ?>"> Nova Operação</button>
<br>
<br>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<h1></h1>
<table class="table table-hover">
<thead>
<th>peca_parent_id</th><th>nr_peca</th><th>Editar/Apagar</th>
</thead>
<tbody id="wrap">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
<!------------------------------------------------------------------------------->
<style type="text/css">
body{
background: #eee;
}
</style>
<script src="../assets/js/jquery/jquery-2.2.3.min.js"></script>
<script src="../assets/js/bootstrap/bootstrap.min.js"></script>
<script src="../assets/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
list();
$(document).on('click',".update",function(){
$.ajax({
url: "<?php echo base_url('Home/update'); ?>"+$(this).data('id'),
method: "POST",
data: {
peca_parent_id: $(".name").val(),
nr_peca: $(".price").val()
},
dataType: 'json',
success:function(r){
if (r.result ==200) {
$("#myModal").modal('hide');
list();
}
}
});
});
$(document).on('click',".insert",function(){
$.ajax({
url: "<?php echo base_url('Home/insert'); ?>",
method: "POST",
data: {
peca_parent_id: $(".name").val(),
nr_peca: $(".price").val()
},
dataType: 'json',
success:function(r){
if (r.result ==200) {
$("#myModal").modal('hide');
list();
}
}
});
});
$(document).on('click','.btn-delete',function(){
$.ajax({
url: $(this).attr("href"),
dataType : 'json',
success: function(r){
if (r.result == 200) {
$("#myModal").modal('hide');
list();
}
}
});
});
function list(){
$.ajax({
url: "<?php echo base_url('Home/get'); ?>",
dataType:"json",
success: function(r){
var html ='';
var i;
for (i = 0;i < r.length; i++) {
html += "<tr>";
html += "<td>"+r[i].peca_parent_id+"</td>";
html += "<td>"+r[i].nr_peca+"</td>";
html += "<td><button data-name='edit' class='btn btn-act btn-update btn-success' href='<?php echo base_url('Home/edit'); ?>"+r[i].id+"'>Edit</button> <button class='btn-act btn btn-danger' data-name='delete' href='<?php echo base_url('Home/deleteoperacao'); ?>"+r[i].id+"'>Hapus</button></td>";
html += "</tr>";
}
$("#wrap").html(html);
}
});
}
});
// aksi btn-act
$(document).on("click", ".btn-act",function(){
var name = $(this).data('name');
// jika data-name sama dengan edit;
if (name=='edit') {
$("#myModal .modal-title").html("Edit Data");
$("#myModal .modal-body").load($(this).attr('href'));
$("#myModal").modal('show');
$("#myModal .modal-footer").html('<button type="button" class="btn btn-danger btn-close" data-dismiss="modal">Tutup</button>')
}
if (name=='add') {
$("#myModal .modal-title").html("Tambah Data");
$("#myModal .modal-body").load($(this).attr('href'));
$("#myModal").modal('show');
var href = $(this).attr("href");
$("#myModal .modal-footer").html('<button type="button" class="btn btn-danger btn-close" data-dismiss="modal">Tutup</button>')
}
if(name=='delete'){
$("#myModal .modal-title").html("Konfirmasi");
$("#myModal .modal-body").html("Apakah Anda Akan Menghapusnya?");
$("#myModal").modal('show');
var href = $(this).attr("href");
$("#myModal .modal-footer").html('<button href="'+href+'" type="button" class="btn btn-danger btn-delete" data-dismiss="modal">Hapus</button>')
}
});
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.css">
<style>
#demo{
background-color:purple;
color: white;
width: 100%;
}
#home{
width: 45px;
}
#back{
width: 25px;
}
#header{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<table id="info_table" class="table">
<tr>
<td id="header">
<p align="center"><span style="float: left"><img src="back.png" id="back"></span><b>মন্ত্রণালয়</b><span style="float: right"><img src="home.png" id="home"></span><span style="float: right"><img src="refresh.png" id="refresh"></span></p>
</td>
</tr>
<tr>
<td id="demo" align="center"><td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');
function bn_num_convert(num){
//console.log(num.length);
var bn_val = '';
for(i=0;i<num.length;i++){
//console.log(num[i] + '/' + bn_num[num[i]]);
bn_val = bn_val + bn_num[num[i]];
}
//console.log(bn_val);
return bn_val;
}
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
[This is the corresponding output of the code.][1]
});
$('#info_table').append(info);
});
</script>
Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error.
Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?
You are not closing the td, thats why empty td is appending.
<td id="demo" align="center"></td>
Close the td like in above code
and remove margin and padding as other posts suggested in case if you want full width till ends.
Set body margin paddding to 0px
body {
padding: 0px;
margin: 0px;
}
Just put in demo id td, it will show.
See thishttps://jsfiddle.net/v6mwpz89/3/
Cheers!
Html- i am writing a program so that the user clicks on an image and is linked to another image and to another i can do it for one image but am struggling with the code to make the second image link to the third and so on any suggestions greatly appreciated?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language="JavaScript">
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
document.theClock.theTime.value = ""
+ tDate.getHours() `enter code here`+ ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
</script>
<body onload="StartClock()" onunload="KillClock()">
<form name="theClock">
<input type=text name="theTime" size=8 style="text-align: center">
</form>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecodes.com/"><span style="font-size: 8pt; text-decoration: none"></span></a></font>
<A HREF = "img2.png">
<img src= "img1.png">
<!--<A HREF = "img4.png">
<img src= "img3.png"> </a>-->
</body>
</html>