So I have a table with rows and columns that I loop through and an array which I split by spaces. What I am trying to do is if someone clicks parts[x] that information gets put into an input box.
var parts = data[j][i].split(' ');
tableData += '<td>';
for(x=0; x<parts.length; x++)
{
tableData += '' +parts[x] + ' ' + '';
}
tableData += '</td>';
For instance from below you can see the table that gets outputted now if someone was to press on Software I want Software to go to the top input box on the left which as you can tell already has Software in it for this example the input boxes name=a
Add a click listener to each tag like this:
var parts = data[j][i].split(' ');
tableData += '<td>';
for(x=0; x<parts.length; x++)
{
tableData += '' +parts[x] + ' ' + '';
}
tableData += '</td>';
Then define a handler outside of your tableData generation code like this:
function clickedPart(part){
document.getElementById("input_box").value = part.innerHTML
}
Please note I assumed your input box has the id "input_box". You can change that to whatever you want, but I recommend giving it an ID instead of a name.
Related
I want to display a "Last modified time" in my javascript table. I have searched a lot on date time but I can only find the last modified time on the document. I have some variables in my table (see below question). What i want to do is display the date after i was modified that variable. Can anyone help me ? :)
The table what im using with javascript.
`
if(response.length > 0)
{
for (var count = 0;count < response.length; count++)
{
html += '<tr>';
html += '<td>' +response[count].id+'</td>';
html += '<td>€'+response[count].inkoopprijs+'</td>';
html += '<td>€'+response[count].verkoopprijs+'</td>';
html += '<td>' +response[count].producten+'</td>';
html += '<td>' +response[count].create_date+'</td>';
html += '<td>' +response[count].last_modified+'</td>';
html += '<td><a href="../prijswijzigen.php?edit='+response[count].id+'" class="edit_btn">Edit</td>';
html += '<td><a onclick="return confirm()" href="crud.php?del='+response[count].id+'" class="del_btn">Delete</td>';
html += '</tr>';
serial_no++;
}
}
`
html += '<td>' +response[count].last_modified+'</td>';
That line is for my variable last modified that is the same as my create_date variable.
The DOM lastModified property in HTML. That displayed the time of the last time i modified the file.
new Date().toLocaleDateString()
is that what you need?
I am trying to create a mark sheet for a project am currently working on where i have an array of names such as
var names = ["n1","n2","n3","n4","n5","n6","n7","n8"];
and i want to display the names in a table column and generate an amount of text boxes which is defined in a loop but so far i am having trouble to display the text boxes side by side of the names.
html+= "<table>";
html+= "<table style='border:1px solid black;'><tr><th>Student Name</th><th>ICA's</th>";
for(var i = 0; i<=names.length;i++)//retrieve names from the array
{
for(var j=1;j<=2;j++)//amount of textboxes need to be created
{
html+= ("<tr><td id='tableTD'>"+names[i]+"</td><td>"+txtBox+"</td></tr></table>");
}
}
display.innerHTML = html;
}
the result from this segment of codes is that i get a duplicate of the names with textbox beside them but not all in 1row for example "n1: textbox1, textbox2"
i have to display all that in a tables and i am limited to only html and javascript no jquery of server side language.
I cant seem to understand where the problem come from..
Is this more like what you're trying to do?
html = "<table>";
html+= "<tr><th>Student Name</th><th>ICA-1/th><th>ICA-2</th><th>Total</th></tr>";
for(var i = 0; i<=names.length;i++)//retrieve names from the array
{
html += "<tr id='row" + i +"'><td>"+names[i]+"</td>";
for(var j=1;j<=2;j++)//amount of textboxes need to be created
{
html+= "<td>"+txtBox+"</td>";
}
html += "<td id='total" + i "'> </td></tr>";
}
html += "</table>";
display.innerHTML = html;
additional code based on further questions below: (additional edits above and below to add totals to each row)
for (let row=0; row<names.length; row++)
{
let txtValue=document.querySelectorAll("#row" + row + " .stdMrk");
if(txtValue.length>0)
{
let rowTotal = 0;
for(var i = 0;i<=y;i++)
{
rowTotal += parseInt(txtValue[i].value);
}
//alert(rowTotal);
document.querySelector("#total" + row).innerHTML = rowTotal;
}
}
This outer loop gets the inputs for each row, then uses your loop to add them.
#Noah B
The below codes is the ans i got from you to display the tables which ive modified it abit to acomodate my requirements.
for(var i = 0; i<names.length;i++)//retrieve names from the array
{
html += "<tr id='row" + i +"'><td style='border:1px solid black;'>"+names[i]+"</td>";
for(var j=1;j<=2;j++)//amount of textboxes need to be created
{
html+= "<td style='border:1px solid black;'><input type='text' class='stdMrk' placeholder='0' value='0' /></td>";
}
for(var k=1;k<=1;k++)//display project or final exams txt box
{
html+= "<td style='border:1px solid black;'><input type='text' class='stdMrk' placeholder='0' value='0' /></td>";
}
html += "</tr>";
}
But my other issue is that now i need to retrieve the value of each rows and from what you can see,ive added an additional for loop to display another set of textboxes which has the same class name as the previous one.
For example n1 will have 3int value entered from the keyboard and i have to compute that 3value and return it. It must be a loop which get repeated for each names.
This is the codes i've written to retrieve the value but it display all the value 1by 1 without any means to know from which rows this belong to..
var txtValue = document.getElementsByClassName("stdMrk");
if(txtValue.length>0)
{
for(var i = 0;i<=y;i++)
{
x += parseInt(txtValue[i].value);
}
alert(x);
}//edit ive manage to create this but still need to iterate through all the names...
Thanks in advance..
I am a newbie in programming. Excuse my ignorance.
My english is not too good. Hope you understand what I mean in my question.
How can I get the value of id NILAI below and insert into mysql.
html += '<tr>';
html += '<td class="indi" align="center">';
html += row.nis;
html += '</td>';
html += '<td class="indi">';
html += row.nama_siswa;
html += '</td>';
html += '<td>';
html += '<input id="nilai" type="text" placeholder="nilai"/>';
html += '</td>';
html += '</tr>';
I want the input value insert into mysql where col nis in mysql table same with row. nis
I've been trying this, but It's wrong. It just read the value of the first row in input nilai and make a new nis=0.
var data1 = document.getElementById("nilai") ;
var i;
for (i=0;i<data1.length;i++) {
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1.elements[i]. value+'")';
}
Note: dataid is a variabel from url that I need to input.
you should use this code in javascript to get the value
var data1 = document.getElementById("nilai").value;
USE:
var data1 = document.getElementById("nilai").value; //to get the value in the input tag
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1+'")';
Newb here...I have a table I created using the jQuery DataTables plugin. Everything is working as expected BUT I added a column that is an input. I'd like for users to be able to sort this column after putting in their values. It is a ranking system that is using quite a long list of items so they need to be able to sort after entering values so that they can keep track of what numbers they've used up to that point. I am setting my variable to be the input value on keyup but after I set the value, I can't sort the column by clicking on the header. It works for the other columns (from jQuery DataTable plugin). Also, if i hard code some text before if the td (before '+sortRank+') it also works as expected. Why is it not recognizing the values for sorting after I set them with jQuery? Thanks for you help!
$(document).ready(function() {
function GenerateTableFromJson(objArray,objArrayTwo,objArrayThree) {
var tableContent = '<table summary="GFSTechIntake" id="AllRequestsTable" style="width:100%"><thead><tr><th>Submit Priority</th><th>Your Prev Rank</th><th>Current Overall</th><th>Category</th>' + '<th>Status</th>' +' <th>Request Name</th>' + '<th>Problem Statement</th>' + '<th>Business Benefits</th><th>Dept(s)</th></tr></thead><tbody>';
var sortRank = "";
$('input.title').on('keyup',function(){
sortRank = $(this).val();
});
tableContent += '<tr class="allItemsTr">';
if(rank != ''){
tableContent += '<td class="allItemsPriority">'+sortRank+'<input class="title" placeholder=' + rank + ' value='+rank+'></td>';
} else {
tableContent += '<td class="allItemsPriority"><input class="title" placeholder=' + rank + '></td>';
}
tableContent += '<td class="prevRank">N/A</td>';
tableContent += '<td class="currentRank">N/A</td>';
}
return tableContent;
}
I'm having trouble with my code. I build this code but there is an issue that I cannot resolve myself. The code should work like this: When entering multiple data (name & email) the datas repeat from top to last.
For example I enter 3 names & emails one by one. I want an output of
Fred fred#gmail.com
George george#gmail.com
Laila laila#gmail.com
But instead I get this results in my table:
Fred fred#gmail.com
Fred fred#gmail.com
George George#gmail.com
Fred fred#gmail.com
George George#gmail.com
Laila laila#gmail.com
In the clearAndSave method in the end when you call $("#output").append(html); you should call $("#output").empty(); first to clear the previous results.
Change the method like this:
function clearAndSave() {
//...
$("#output").empty();
$("#output").append(html);
}
If you want to presist your initial data, modify the clearAndSave method like this:
function clearAndSave() {
// Clear fields
nameInput.value = "";
emailInput.value = "";
var html = [];
console.log(arraypeaople);
for(i = 0; x <= arraypeaople.length - 1; i++){
// Mark added rows to be able to remove them later
html += "<tr class='added-row'>";
html += "<td>" + arraypeaople[i].name + "</td>";
html += "<td>" + arraypeaople[i].email + "</td>";
html += "</tr>";
}
// Remove just the added rows
$("#output").find(".added-row").remove();
$("#output").append(html);
}