I have a test code block through which I am trying to display a table based on a checkbox selection. The action is working and the table is being displayed. The only problem is - there are no borders. Could you please give me suggestions on what I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<table border="1">
<tr>
<td style=min-width:50px></td>
<td style=min-width:50px>Retrofit</td>
<td style=min-width:50px><input style=min-width:50px id="retrofit" name="retrofit" type="checkbox" value="1" onchange="javascript:toggleOtherTextboxVisible()" /></td>
</tr>
</table>
<table style="display:none" name="table" id ='table' border="1"/>
<th>new</th>
<th>newer</th>
</table>
</body>
<script type="text/javascript">
function toggleOtherTextboxVisible()
{
var check = document.getElementById('retrofit');
if (check.checked) {
document.getElementById('table').style.display. = 'block';
}
else
{
document.getElementById('table').style.display = 'none';
}
}
</script>
</html>
The first error I can see is that a table doesn't have a display value of "block" but "table".
Therefore, simply change this line :
document.getElementById('table').style.display. = 'block';
To :
document.getElementById('table').style.display. = 'table';
Related
I have a jquery datatable of something like this
when i click the plus icon, it will show 2 buttons the capabilities and reimbursement, what I want is when i click the capabilities button, I want to get the parent row which are name, all and etc. Is that possible? I tried several method but it doesn't work.
What I tried is
function set_credentials(el) {
var tr = $(el).closest('tr').parents('tr');
var prevtr = tr.prev('tr')[0];
console.log(prevtr)
But i get the html dom.
I think I almost got it but i need some help. Thanks
Is this what you want? I console.log(name) for the result.
Example below
$("#example").on("click", set_credentials);
function set_credentials(event) {
if (event.target.tagName === "BUTTON") {
var tr = $(event.target).closest("tr");
var prevtr = tr.prev();
var name = prevtr.find("td.mws_name").text();
console.log(name);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div>
<table id="example">
<thead>
<th>name</th>
<th>date</th>
<th>button</th>
</thead>
<tbody>
<tr>
<td class="mws_name">joe</td>
<td>2011-1-1</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button>set</button></td>
</tr>
<tr>
<td class="mws_name">Sam</td>
<td>2011-5-1</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button>set</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm a vue.js beginner, so I need help.
I write an HTML page which show a list of object in a simple table.
The table is made by a script which get a JSON object from a servlet and shows it using a v-for directive.
In each row of the table, there is a button that the user can click to book the object wrote in the corresponding row, using a form.
The problem is that I don't know how to get the object's information correspondent to the clicked line to put it in the form's fields.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repetition - catalog</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<header><h1>REPETITIONS.com</h1></header>
<div id="app" class="float-container" style="height: 80%">
<table class="catalog-table">
<thead>
<tr>
<th style="width: 200px">Corso</th>
<th style="width: 250px">Docente</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="rep in reps">
<td>{{rep.teacherName}} {{rep.teacherSurName}}</td>
<td>{{rep.course}}</td>
<td>
<form action="/Repetition/controller/ServletController" method="post" id="i">
<input type="hidden" name="operation" value="booking">
<input type="hidden" name="id_t" value="rep.getId_teac"> <---set the value of the current row
<input type="hidden" name="id_c" value="rep.getId_cor"> <---set the value of the current row
<button type="submit">Book</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
<footer>xxxxxxx</footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var app = new Vue ({
el: '#app',
data: {
repetitions: [],
link: '/Repetition/ServletController?operation=catalog&device=x'
},
mounted(){
this.getRepetitions()
},
methods:{
getRepetitions: function(){
var self = this;
$.get(this.link, function(data) {
self.repetitions = data;
});
}
}
});
</script>
</body>
</html>
Alternatively the form request could be manage with another script, but there would be the same problem.
I have modified this javascript code that I found on jsfiddle. My aim is to display tables when a link has been clicked, and when clicking on a different link it displays a different table and hide the previous table. Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<script>
var elem=document.getElementById("loginTable");
var hide = elem.style.display =="none";
var elem2=document.getElementById("loginTable2");
var hide2 = elem2.style.display == "none";
function toggleTable(){
if (hide){
elem.style.display="table";
elem2.style.display="none";
}
else{
elem.style.display="none";
}
}
function toggleTable2(){
if (hide2){
elem2.style.display="table";
elem.style.display="none";
}
else{
elem2.style.display="none";
}
}
</script>
</head>
<body>
<a href="#" id="loginLink" onclick="toggleTable();return false" >Business Cards</a>
<table id="loginTable" border="1" align="center" style="display:none">
<tr>
<td>
Business card table
</td>
</tr>
</table>
<a href="#" id="loginLink" onclick="toggleTable2();return false" >Letterheads</a>
<table id="loginTable2" border="1" align="center" style="display:none">
<tr>
<td>
Letterhead table
</td>
</tr>
</table>
</body>
</html>
It worked on jsfiddle, but when I place it on my HTML page, it won't run.
Any suggestions?
Also, I have no knowledge of JavaScript, I have only modified it and it ran on jsfiddle, but not my HTML page.
when your script load its not find DOM elements so its not working
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<a href="#" id="loginLink" onclick="toggleTable();return false" >Business Cards</a>
<table id="loginTable" border="1" align="center" style="display:none">
<tr>
<td>
Business card table
</td>
</tr>
</table>
<a href="#" id="loginLink" onclick="toggleTable2();return false" >Letterheads</a>
<table id="loginTable2" border="1" align="center" style="display:none">
<tr>
<td>
Letterhead table
</td>
</tr>
</table>
<script>
var elem=document.getElementById("loginTable");
var hide = elem.style.display =="none";
var elem2=document.getElementById("loginTable2");
var hide2 = elem2.style.display == "none";
function toggleTable(){
if (hide){
elem.style.display="table";
elem2.style.display="none";
}
else{
elem.style.display="none";
}
}
function toggleTable2(){
if (hide2){
elem2.style.display="table";
elem.style.display="none";
}
else{
elem2.style.display="none";
}
}
</script>
</body>
</html>
if you want to use script in head section you need to write window.onload function
<script>
window.onload=function(){
// your JS code
}
</script>
I have this for that lets users upload pictures. I wanted to limit the number of pictures to 4. At first it shows only one input field, then if a user wants to add more they can click on Button-Add-icon.png and another input field appears. When they reach four inputs and they decide to remove one they click on Button-Delete-icon.png.
This whole thing works fine on Firefox, Chrome, Seamonkey and IE9. But it doesn't work on IE8, IE7 and before.
Could someone give a hint on how to get it fixed?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
var totalItems = 0;
function addItems()
{
if(totalItems < 3)
{
var table1 = document.getElementById('tab1');
var newrow = document.createElement("tr");
var newcol = document.createElement("td");
var input = document.createElement("input");
input.type="file";
input.name="image[]";
newcol.appendChild(input);
newrow.appendChild(newcol);
table1.appendChild(newrow);
totalItems++;
} else {
//Display your message here..
}
}
function remItems()
{
var table1 = document.getElementById('tab1');
var lastRow = table1.rows.length;
if(lastRow>=2)
{
table1.deleteRow(lastRow-1);
totalItems--;
}
}
</script>
</head>
<body>
<table align="center" border="0" id="tab1" >
<tr>
<td width="218" align="center"><input type="file" name="image[]" /></td>
<td width="54" align="center"><img src="images/Button-Add-icon.png"
style="cursor:pointer" onclick="addItems()" />
</td>
<td><img src="images/Button-Delete-icon.png" style="cursor:pointer"
onclick="remItems()" />
</td>
</tr>
</table>
<table align="center" border="0" id="tab2">
</table>
</body>
</html>
You are adding the row as a child to the wrong element.
An HTML table always has a tbody element as a child element, all tr elements go inside this. If you write a piece of HTML including a table with no tbody element it will be created automatically, but when altering the table later on you have to take the tbody element into account.
An easy fix is to write the tbody element explicitly, give it an id, and insert new rows in the tbody element instead of in the table element.
<table>
<tbody id="tb1">
<tr><td></td></tr>
</tbody>
</table>
I've written the following code, which enables a textbox when the checkbox is checked. The code is working with a small defect. For the first time when we execute, the textbox is enabled irrespective of the checkbox is checked or unchecked. But after a couple of times, the code is working correctly. Please help me to find the bug.
<html>
<head>
<title>SHOP ALL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" src="addcart.js"></script>
<script type="text/javascript">
function enableDisable(bEnable, textBoxID)
{
document.getElementById(textBoxID).disabled = !bEnable
}
</script>
</head>
<body>
<form>
<table align="center" width="100%" cellpadding="50px">
<tr>
<th> TICK ON THE THINGS YOU NEED </th>
<th> PRODUCT </th>
<th> DESCRIPTION </th>
<th> NO OF ITEMS </th>
</tr>
<tr>
<td><input type="checkbox" name="shoe" onclick="enableDisable(this.checked, '0')"></td>
<td><img src="images/1.jpg" alt="shoe1" width="180px" height="200px"></td>
<td><h4>-------</h4></td>
</tr>
--------------
</body>
</html`>
You should put your code:
<script type="text/javascript">
function enableDisable(bEnable, textBoxID)
{
document.getElementById(textBoxID).disabled = !bEnable
}
</script>
before closing the body, or to be invoked on DOM ready. In this way the code is being executed before even the checkbox and the text field exists.
By default the text input is enabled so you may need also to set the checkbox as checked.
Here is a working version:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<input type="text" id="txtBox" />
<input type="checkbox" id="chkbox" onchange="document.getElementById('txtBox').disabled=!this.checked;" checked="checked" />
</body>
</html>
And a demo: http://jsbin.com/ulemim/2