I want to add some rows in the tables but they have the same name. I've got the individual row length of the 3 tables but when i insert the row, it only inserted in the first table. Here is my code using javascript:
$('table').each(function() {
var sam = $('tbody tr', this).length;
var table = document.getElementById("tb-calendar1");
// alert(sam);
if(sam < 8){
var row = table.insertRow(7);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
cell1.innerHTML = " ";
cell2.innerHTML = " ";
cell3.innerHTML = " ";
cell4.innerHTML = " ";
cell5.innerHTML = " ";
cell6.innerHTML = " ";
cell7.innerHTML = " ";
}
});
Here's the picture
Looks like you have table elements with duplicate email IDs. IDs must be unique. Due to duplicate ids, your selector for table(document.getElementById) is selecting first table only.
You can rather use context this to target current table element in .each().
var table = this;
I am using Struts Version 1.2.9.
I have a requirement to add rows dynamically to a table using JavaScript which is working fine.
It looks like:
function addRow(tableID) {
var table = document.getElementById(tableID);
rowCount += 1;
if(rowCount <= 5){
var row = table.insertRow(3);
var col1html = "<label for='incomecategory'>Other Income:</label>";
var col2html = "<select id='incomecategory' name='income_category'><option value='' selected>Please Select</option><option value='rent'>Rent</option><option value='interestanddividends'>Interest and Dividends</option><option value='governmentbenefits'>Government Benefits</option><option value='other'>Other</option></select>";
var col3html = "$<input type='text' name='incomevalue' id='incomevalue'/>";
var col4html = "<select id='incomefrequency' name='income_frequency'><optgroup label='Per'><option value='perweek'>Per Week</option><option value='perfortnight'>Per Fortnight</option><option value='peryear'>Per Month</option><option value='peryear'>Per Year</option><option value='' selected>Per</option></select>";
var col5html = "<input type='button' value='X' onclick='removeRow(this)'/>"
var col1 = row.insertCell(0); col1.innerHTML=col1html;
var col2 = row.insertCell(1); col2.innerHTML=col2html;
var col3 = row.insertCell(2); col3.innerHTML=col3html;
var col4 = row.insertCell(3); col4.innerHTML=col4html;
var col5 = row.insertCell(4); col5.innerHTML=col5html;
}else{
alert('Reached maximum no of rows');
}
}
If you see carefully I have hardcoded all the HTML tags to build a row, but I want to instead use struts tags in creating rows.
I did a web app with some JavaScript and jQuery which works well on PC but on mobile those functions do not work.
Functions like creating a table row dynamically at clicking a button using :
var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
also my ajax call is not working on mobile, below is some major part of the function (creating table row and ajax call)
$.ajax({
type: 'POST',
url: 'getProduct',
data: { product_id:product_id },
dataType : 'json',
success:function(response){
var name = response.products['name'];
var id = response.products['id'];
var bid = document.getElementById('buyer_id').value;
var sid = <?php echo $this->session->userdata('id'); ?>;
var category = document.getElementById('category').value;
var date = document.getElementById('date').value;
if(category=='agent'){
var price = response.products['agent_price'];
}else{
var price = response.products['vendor_price'];
}
var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
cell1.innerHTML = count;
cell2.innerHTML = name;
cell3.innerHTML = '<input type="text" name="quantity[]" onblur="addamount()" />';
cell4.innerHTML = price;
cell4.id=count;
cell5.innerHTML = '<span class="glyphicon glyphicon-trash"></span> Delete';
}
});
I am trying to insert Form into Table, but <form> tag is not inserted (only input type).
$(function () {
var table = document.getElementById("transport");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell2.innerHTML = "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell10.innerHTML = "</form>";
});
As I mentioned above in the comments.
form start and end tag should be contained within a container.
But you are starting it in one cell and closing in another. That will not work.
Instead you can do this:
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell1.innerHTML += "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell1.innerHTML += "</form>";
And so that you know, there are many better ways... This is kind of old school way..(as mentioned again in comments)
var data =[];
function add(){
var fname = document.getElementById("firstname").value,
lname= document.getElementById("lastname").value,
email = document.getElementById("email").value,
age = document.getElementById("age").value,
mobile = document.getElementById("mobile").value,
gen = gender1.checked?gender1.value:gender2.value,
date = document.getElementById("date").value,
adress = document.getElementById("address").value,
city = document.getElementById("city").value,
state = document.getElementById("state").value,
zip = document.getElementById("zip").value,
pan = document.getElementById("pan").value,
tan = document.getElementById("tan").value,
aadhar = document.getElementById("aadhar").value,
obj = {name1:fname,name2:lname,mail:email,aged:age,num:mobile,gend:gen,tarrek:date,
add:adress,place:city,stat:state,zpicode:zip,panc:pan,tanc:tan,aadharc:aadhar}
data.push(obj);
var table = "<table class='table table-striped table-bordered margin' id='delet'>";
table+= "<tr><th>Firstname</th><th>Lastname</th><th>Email</th><th>Age</th><th>Mobile</th><th>Gender</th><th>Date</th><th>Address</th><th>City</th><th>State</th><th>Documents</th><th>Zip</th><th>Pan</th><th>Tan</th><th>Aadhar</th></tr>";
for(var i=0;i<data.length;i++){
table+="<tr><td>"+data[i].name1+"</td><td>"+data[i].name2+"</td><td>"+data[i].mail+
"</td><td>"+data[i].aged+"</td><td>"+data[i].num+"</td><td>"+data[i].gend+
"</td><td>"+data[i].tarrek+"</td><td>"+data[i].add+"</td><td>"+data[i].place+
"</td><td>"+data[i].stat+"</td><td>"+data[i].zpicode+"</td><td>"+data[i].panc+
"</td><td>"+data[i].tanc+"</td><td>"+data[i].aadharc+
"</td></tr>"
}
table+="</table>";
document.getElementById("table-data").innerHTML=table;
};
I'm creating a table dynamic table with Javascript:
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
I want to fill the cell5 with some innerHTML with a Javascript variable inside
var add = aux[i].split("#");
cell5.innerHTML = "<img src='MatrixLogos/add[3]' width='100' height='25'/>";
but this give add[3] in the html instead of the value inside add[3].
My question is how to escape the variable inside the innerHTML code, so it shows me is value and not the declaration.
Use "+".
var add = aux[i].split("#");
cell5.innerHTML = "<img src='MatrixLogos/"+add[3]+"' width='100' height='25'/>";
Use String concatenation like
var add = aux[i].split("#");
var string = "This is to " + add[3] + " test with value";
Where as in your case, statement will become:
cell5.innerHTML = "<img src='MatrixLogos/"+add[3]+"' width='100' height='25'/>";