I have a multiple tables as below, i want to print the name every 2 seconds on my first table without interrupting table2, if i use innerHTML it's always printing on top (above table1 & table2, but i need the variable on a specific location like in my case table1, if i use document.write on change() function it's keep looping the function infinitely and not coming out means table1 & table2 not showing up? could you please suggest the better way to resolve this?
I have the following code on my update.php
<html>
<head>
<link href="css/sample.css" rel="stylesheet" type="text/css" />
<div id="changeText" ></div>
<script type="text/javascript">
var text = ["Welcome", "David", "Paul", "John"];
var counter = 0;
var elem = document.getElementById("changeText");
function change() {
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0;
}
</script>
<body>
<tr>
<td>
<table align="left" width=15%>
<td <B><font color="green">Name:<script type="text/javascript">setInterval(change, 2000);
</script>
</font><br>
</td>
</table>
<table id="sample" width=70% cellpadding="2" cellspacing="1" border="1">
<th class="sno" colspan="2">SNO</th>
<th class="fname" colspan="2">FIRST NAME</th>
<th class="lname" colspan="2">LAST NAME</th>
</table>
</td>
</tr>
</body>
</html>
My goal is print the array of text under this tag
<td <B><font color="green">Name:<script type="text/javascript">setInterval(change, 2000);</script></font>
it should keep printing every 2 seconds with a name change...
You had some syntax errors :
http://jsfiddle.net/gFWeF/6/
<html>
<head>
<link href="css/sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<tr>
<td>
<table align="left" width=15%>
<td><font color="green">Name:</font>
<span id="myname"></span>
</td>
</table>
<table id="sample" width=70% cellpadding="2" cellspacing="1" border="1">
<th class="sno" colspan="2">SNO</th>
<th class="fname" colspan="2">FIRST NAME</th>
<th class="lname" colspan="2">LAST NAME</th>
</table>
</td>
</tr>
</body>
</html>
<script>
var text = ["Welcome", "David", "Paul", "John"];
var counter = 0;
var elem = document.getElementById("myname");
function change() {
elem.innerHTML = text[counter];
counter++;
if (counter >= text.length) counter = 0;
}
change();
setInterval(function() {
change()
}, 2000);
</script>
Related
I'm trying to append a copy of an element to the bottom of the parent element. It seems to append everything above the last element within the parent. Live example on JSFiddle
var count = 1;
$("#addBtn").click(function(){
$('#trid1').clone().appendTo('table#exampleTable > tbody');
count++;
$('#trid1').last().prop('id', 'trid'+count);
$('#trid'+count+' > th').html(count);
});
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="exampleTable">
<thead>
<tr>
<th scope="col">c1</th>
</tr>
</thead>
<tbody>
<tr id="trid1" class="trclass">
<th scope="row">1</th>
</tr>
</tbody>
</table>
<button type="button" id="addBtn">Add</button>
I would change the id before appending the new element to the DOM.
Anyway I slightly refactored your code with that strategy in mind and better dealt with the current index every time you click the add button. The latest index gets saved in a data attribute in the table.
$("#addBtn").click(function(){
const latestIndex = $('#exampleTable').data('latest-index');
let i = latestIndex+1;
const newRow = $('#trid1').clone();
newRow.prop('id', `trid${i}`);
newRow.data('index', i);
newRow.text(i);
newRow.appendTo('table#exampleTable > tbody');
$('#exampleTable').data('latest-index', i);
});
button{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="exampleTable" data-latest-index="1">
<thead>
<tr>
<th scope="col">Rows</th>
</tr>
</thead>
<tbody>
<tr id="trid1" class="trclass">
<th scope="row">1</th>
</tr>
</tbody>
</table>
<button type="button" id="addBtn">Add</button>
I am facing some issues related to creating an dynamic table. I append rows through jquery on onchange event . My issue is i want to find row Index of each rows in table how can i get this id using jquery?
Any body who can help me?
This is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="assets/js/libs/jquery-3.5.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<button id="btn" onclick="addRow()">Add Row</button>
<table id="Items_table" border="1">
<thead>
<tr>
<th>Item Name</th>
<th colspan="2">Quantity</th>
<th>Purchase Price</th>
<th>Tax%</th>
<th>Tax Amount</th>
<th>Discount</th>
<th>Unit Cost</th>
<th>Total Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="Item_table_data">
</tbody>
</table>
<script>
var numberofRowsforItems = 0;
function addRow() {
numberofRowsforItems++;
var htmlforItemTable = '<tr class="" id=" " data-row="1"><td class="tablerow"><span style="color:White">Hello</span></td ><td colspan="2"> <div><button id="table_q_btn">-</button> <input type="text"/><button id="table_q_btn">+</button> </div> </td >'
+ '<td><input type="text" value="Hellos" id="HelloID"/></td><td><input type="text" value="Hello" disabled/></td>'
+ '<td><input type="text" value="Hello"/></td><td><input type="text"/></td><td><span style="color:White">Hasd</span></td><td><span style="color:White">qdasd</span></td><td><button class="remove">-</button><button class="getId">Id</button></td></tr >';
$('#Item_table_data').append(htmlforItemTable);
}
$(document).on('click', '.getId', function () {
var a = $(this).closest('tr').find('.tablerow').val();
alert(a);
var b = $(this).val();
alert(b);
});
$(document).on('click', '.remove', function () {
$(this).parents('tr').remove();
});
</script>
</body>
</html>
I want to append this dynamic row in table and now i want to get every row index through jquery or javascript
Here's what the code should look like:
var numberofRowsforItems = 0;
function addRow() {
numberofRowsforItems++;
var htmlforItemTable = '<tr class="" id="'+ numberofRowsforItems +'" data-row="1"><td class="tablerow"><span style="color:White">Hello</span></td ><td colspan="2"> <div><button id="table_q_btn">-</button> <input type="text"/><button id="table_q_btn">+</button> </div> </td >'
+ '<td><input type="text" value="Hellos" id="HelloID"/></td><td><input type="text" value="Hello" disabled/></td>'
+ '<td><input type="text" value="Hello"/></td><td><input type="text"/></td><td><span style="color:White">Hasd</span></td><td><span style="color:White">qdasd</span></td><td><button class="remove">-</button><button class="getId">Id</button></td></tr >';
$('#Item_table_data').append(htmlforItemTable);
}
$(document).on('click', '.getId', function () {
var a = $(this).closest('tr').attr('id');
alert(a);
});
What I've changed is: id="'+ numberofRowsforItems +'" and: $(this).closest('tr').attr('id');
I have a bootstrap table that looks like this -
$('#colorChangeForm').submit(function () {
changeBackground();
return false;
});
function changeBackground() {
var noOfProposals = document.getElementById("countInput").value;
var table = document.getElementById("myTable");
var tableLen = table.rows.length;
for (var i = 1; i < tableLen; i++) {
if (noOfProposals) {
if (table.rows[i].cells[1].innerText > noOfProposals) {
table.rows[i].cells[1].className = 'table-danger';
}
else {
table.rows[i].cells[1].className = 'table-success';
}
}
}
}
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" integrity="sha256-o8aByMEvaNTcBsw94EfRLbBrJBI+c3mjna/j4LrfyJ8=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
</head>
<form class="form-inline" id="colorChangeForm">
<div class="form-group mb-2">
<label for="countInput">No. of Proposals - </label>
<input type="proposals" class="form-control" id="countInput" placeholder="limit of proposals">
</div>
<button type="submit" class="btn btn-primary mb-2" id="btnChangeColor">Submit</button>
</form>
<table data-toggle="table"
data-classes="table table-hover"
data-striped="true"
data-sort-order="asc"
style="width: auto;" id="myTable" class="table">
<thead class="thead-dark">
<tr style="background-color:lightgray">
<th data-sortable="true">Name</th>
<th data-sortable="true">Total Proposals</th>
</tr>
</thead>
<tr>
<td>A</td>
<td>123</td>
</tr>
<tr>
<td>B</td>
<td>150</td>
</tr>
<tr>
<td>C</td>
<td>170</td>
</tr>
</table>
I'm changing the class for "Total proposals" based on the value.
This value, I'm getting from a form on the same page.
I'm executing a javascript where I'm changing the color of the cell
This changes the color of the cell correctly.
However, When I sort the table (not refresh the page), it somehow removes the dynamic cell class.
Any Idea how to keep my cell class while sorting the table?
The sorting event is handled by the bootstrap-table extension you are using in your code.
It's not part of bootstrap itself and it's sorting system works by recreating table rows in the selected order.
That means that you are assigning a class to an element that will be deleted.
To solve the problem you can:
Use a different sorting system that dosn't delete column rows
Execute the changeBackground function again after the sortying is ended
I have recently started to use jQuery and I would like a little help, on a function that I would like to implement, in practice I have a html table in which for each row there is the course, professor, day, hour, status and a button to cancel my reservation, I initially created a small function in which when I click the button it changes the value of STATUS from ACTIVE to CANCEL and then through a post sends data to the server.
This is my code - I'm using a jsp page and I fill the columns using jstl
$(document).on('click', '.table-remove', function(e){
var row = $(this).closest('tr');
$(this).prop("disabled",true);
var col1=row.find('td:eq(0)').text();
var col2=row.find('td:eq(1)').text();
var col3=row.find('td:eq(2)').text();
var col4=row.find('td:eq(3)').text();
var col5=row.find('td:eq(4)').text();
var sessionValue= $("#hdnSession").data('value');
$.post("Serverlet_prenotazioni_disdette",{corso:col1,professore:col2,giorno:col3,ora:col4,stato:col5,user:sessionValue},
function(data){
row.find('td:eq(4)').html('Disdetta');
alert(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-md table-hover text-center" id="table">
<tr style="background-color:#17a2b8;color:white">
<th class="text-center">Utente</th>
<th class="text-center">Corso</th>
<th class="text-center">Professore</th>
<th class="text-center">Giorno</th>
<th class="text-center">Ora</th>
<th class="text-center">Stato</th>
<th class="text-center"> </th>
</tr>
<tr>
<c:forEach var = "rip" items = "${prenotazioni}">
<tr>
<td id="account" class="pt-3-half" contenteditable="false" name="account"><c:out value = "${rip.getAccount().getNickname()}"/></td>
<td id="corso" class="pt-3-half" contenteditable="false" name="corso"><c:out value = "${rip.getRipetizione().getCorso().getNome_Corso()}"/></td>
<td id="professore" class="pt-3-half" contenteditable="false" name="professore"><c:out value = "${rip.getRipetizione().getProfessore().getCognome()}"/></td>
<td id="giorno" class="pt-3-half" contenteditable="false" name="giorno"><c:out value = "${rip.getGiorno()}"/></td>
<td id="ora" class="pt-3-half" contenteditable="false" name="ora"><c:out value = "${rip.getOra()}"/></td>
<td id="stato" class="pt-3-half" contenteditable="false" name="stato"><c:out value = "${rip.getStato()}"/></td>
<td>
<span id="table-remove" class="table-remove"><button type="button" id="button-d" class="btn btn-success" >Prenota</button></span>
</td>
</tr>
</c:forEach>
I would like to make a function in which at the time of loading the page analyzes the STATUS column and where it finds "Deleted" I must disable the button and change the color of the text "Canceled" from black to red, while where State has value "Activate" he must do nothing
I tried to do this function
$(document).load('.table-remove',function(){
var row = $(this).closest('tr');
var text=row.find('td:eq(4)').text();
if(text==="Disdetta"){
$(this).prop("disabled",true);
}
});
but doing so no longer works
Here is a reduced example showing how you can do:
// on load...
$(document).ready(function() {
// ...for each row...
$('tbody tr').each(function() {
var $statusCell = $(this).find('td:first-child');
// ...get status
var status = $statusCell.text();
// if status is "Deleted"...
if (status === 'Deleted') {
// ...disable button...
$(this).find('button').prop('disabled', true);
// ...and change text color
$statusCell.css('color', 'red');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Deleted</td>
<td>
<button>Do something</button>
</td>
</tr>
<tr>
<td>Other status</td>
<td>
<button>Do something</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
In my jsp I am selecting some values from one Table1 and adding it to another table Table2 by using the Add button. This is my jsp:
<%#page contentType="text/html;charset=UTF-8" language="java"
pageEncoding="UTF-8"%>
<%#taglib prefix="s"uri="/struts-tags"%>
<!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=utf-8"/>
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function(){
$('#add').on("click", function(){
$('#one tbody input:checked').parent().parent()
.appendTo("#two tbody");
return false;
});
$('#remove').on("click", function(){
$('#two tbody input:checked').parent().parent()
.appendTo("#one tbody");
return false;
});
});
function GetCellValues() {
var oTable = document.getElementById('two');
var mycars = new Array();
var mycars1 = new Array();
var mycars2 = new Array();
//gets table
var rowLength = oTable.rows.length;
//gets rows of table
for (i = 0; i < rowLength; i++){
//loops through rows
var oCells = oTable.rows.item(i).cells;
//gets cells of current row
var cellLength = oCells.length;
for(var j = 0; j < cellLength; j++){
//loops through each cell in current row
//get your cell info here
var cellVal = oCells.item(j).innerHTML;
alert(cellVal);
if(j==3){
mycars[i] = cellVal;
}
if(j==1){
mycars1[i] = cellVal;
}
if(j==2){
mycars2[i] = cellVal;
}
}
}
window.location ="DynamicTable?mytable="+mycars;
}
</script>
</head>
<body>
<button onclick="GetCellValues()">Submit</button>
<table id="one" style="border:1px solid red;">
<caption>Table 1</caption>
<thead>
<tr>
<th ></th>
<th> Id</th>
<th>Name</th>
<th>Status</th>
<th>Type</th>
<th>RollUp Type</th>
<th>System</th>
</tr>
</thead>
<tbody>
<s:iterator value="formList1">
<tr>
<td><s:checkbox theme="simple" ></s:checkbox>
</td>
<td><s:property value="id"/></td>
<td><s:property value="named"/></td>
<td><s:property value="status"/></td>
<td><s:property value="type"/></td>
<td><s:property value="rollup"/></td>
<td><s:property value="unit"/></td>
</tr>
</s:iterator>
</tbody>
</table>
<table id="two" style="border:1px solid green;">
<caption>Table 2</caption>
<thead>
<tr>
<th ></th>
<th> Id</th>
<th>Name</th>
<th>Status</th>
<th>Type</th>
<th>RollUp Type</th>
<th>System</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><hr><br>
<button id="add">Add</button>
<button id="remove">Remove</button>
</body>
</html>
Here how do I retrieve the values that I added in Table 2 in my action when I click on Submit button in Struts2?
This is what I tried, I called the javascript GetCellValues() on click of Submit button, where I set each column in the array mycars,mycars1 and so on.
In my action class I have getters and setters for these arrays. But in my action I am not able to retrieve these values.
How to get the values of a table generated in the jsp in the action?
UPDATE:
I just corrected the line window.location ="DynamicTable?mytable="+mycars; now i'm getting the values in the action as a String separated by commas. I would like to know if there is any other method than what I have used?
yes you can use hidden input fields for passing values to action class.
you can set those fields in java script which will be called onclick() of submit button.