I would like to put CSS code into my table but don't want to styles at every row of the table. I have the following code:
CSS:
.statetable th
{
width: 250px;
color: red;
text-align: left;
}
.statetable tr
{
width: 250px;
}
JavaScript:
function showState()
{
myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";
createRow("------------------", "------------");
createRow("Layout", (document.getElementById("startradio").form.format == "Default"));
myTable +="</table>";
document.getElementById("tableHolder").innerHTML = myTable;
}
function createRow(type, value)
{
myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";
}
HTML:
<input type="button" id="button" value="Click to show states" onclick="showState()"/>
<div id="tableHolder"></div>
The style is not working though. I have placed my th and tr's and placed the css with them but I am not sure what am I doing wrong.
Replace these:
myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";
With these:
myTable = "<table class='statetable'><tr><th>Type</th>";
myTable += "<th>Value</th></tr>";
Also, in createRow, replace:
myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";
With:
myTable += "<tr><td>" + type + "</td><td>" + value + "</td></tr>";
You are ending up with more starting <table> tags then closing ones. The createRow() method should not return a starting <table> tag.
Also, .set width on the table instead of the <tr>/<th>.
Related
I'm trying to get the drop down menu limited to whatever number you put in the max mark input field. E.G. if you put 10 in the max marks input field the drop down menu in the marks field is limited to 10
I tried using onchange but couldn't figure out how to use the number I put in the max mark field in the for loop I have made to create the drop down menu
$(document).ready(function () {
load();
});
function load(){
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function () {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if(NoOfRec > 0) {
createControll(NoOfRec);
}
});
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>"+
"<tr>"+
"<th> Section </th>"+
"<th> Max </th>"+
"<th> Comment </th>"+
"<th> Marks </th>"+
"</tr>";
for (i=1; i<=NoOfRec; i++) {
tbl += "<tr>"+
"<td>"+
"<input type='text' id='txtSection' placeholder='Section' autofocus/>"+
"</td>"+
"<td>"+
"<input type='text' id='txtMax' placeholder='Max' />"+
"</td>"+
"<td>"+
"<input type='text' id='txtComment' placeholder='Comment' />"+
"</td>"+
"<td>"+
"<select id='ddlMarks'>";
for (let a = 0; a <= 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>"+
"</td>"+
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec"/>
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>
You just need to loop thru NoOfRec the same way you are making the table rows
Instead of looping thru 100 for (let a = 0; a <= 100; a++) { you just loop thru the input number for (var a = 1; a <= NoOfRec; a++) {.
Updated answer
Due to comments from OP, I have updated the code to determine the dropdown options based on the input from the max field generated from the table
$(document).ready(function() {
load();
});
function load() {
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function() {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if (NoOfRec > 0) {
createControll(NoOfRec);
}
});
$("#AddControll").on( "keyup", ".txtMax", function() {
var $this = $(this);
// get the input value
var l = parseInt( $this.val() );
// if input is a number then append items in dropdown
if( typeof l == 'number' ) {
// find the row parent tr and get the dropdown element then empty it first
var $marks = $this.closest('tr').find('.ddlMarks');
$marks.empty();
// add dropdown items based on input
for (var j = 0; j < l; j++) {
$marks.append("<option>" + j + "</option>");
}
}
} );
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>" +
"<tr>" +
"<th> Section </th>" +
"<th> Max </th>" +
"<th> Comment </th>" +
"<th> Marks </th>" +
"</tr>";
for (i = 1; i <= NoOfRec; i++) {
// ID must be unique, updated ID on inputs/select to use class instead
tbl += "<tr>" +
"<td>" +
"<input type='text' class='txtSection' placeholder='Section' autofocus/>" +
"</td>" +
"<td>" +
"<input type='text' class='txtMax' placeholder='Max' />" +
"</td>" +
"<td>" +
"<input type='text' class='txtComment' placeholder='Comment' />" +
"</td>" +
"<td>" +
"<select class='ddlMarks'>";
for (var a = 0; a < 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>" +
"</td>" +
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec" />
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>
I am creating dynamic table which I has 3 columns. First columns has campaign name 2nd & 3rd column is status of that campaign which is image button. What I expect when I click status button it should return respective campaign name. Nothing happens when I click on status button.
would be great if you can provide solution.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=function(){getRow(this)}/></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
function getRow(obj) {
var txt;
e.preventDefault();
txt = $(this).parent().prev().prev().text();
alert(txt + 'selected txt');
}
i have fixed your problem.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td class='parent'>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=getRow(this) /></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
}
function getRow(event) {
var txt = $(event).parent().prev().text();;
alert(txt + ' selected txt');
}
var a = ["test","test2"];
displayCampaigns(a);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>
You could save the #demo object in a variable and attach an event listener to that. On click check if the event target has a class that you attach to your buttons, like telStatus (don't use that as id because having more than one row will result in several html elements having the same id). Add the campaign name as id or a data attribute to the table rows and just check the clicked buttons parentNodes to retrieve the id/data attribue.
var campaignNames = [
'abc', 'efg'
]
var demo = document.querySelector('#demo');
displayCampaigns(campaignNames);
function displayCampaigns(campaignNames) {
var html = "<table class='table table-responsive-md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr id='" + campaignNames[i] +"'>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' class='telStatus btn btn-success btn-circle btn-sm'/></td>";
html += "<td><img src='ready.jpg' /></td>";
html += "</tr>";
}
html += "</table>";
demo.innerHTML = html;
}
demo.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('telStatus')) return;
var parentTr = evt.target.parentNode.parentNode;
var campaignName = parentTr.id;
alert(campaignName + ' selected txt');
});
Hey I have two td elements in a table.
I want the have separate style classes for them. How do I do this?
This is my code:
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td>" + value1 "</td>" + "<td>" + value2 + "</td>" + "</table>";
}
table += "</tr>";
I have tried to simply add class in td element but that does not work.
Any ideas? I use Javascript to create the table.
So this does not work:
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td class="one">" + value1 "</td>" + "<td class="two">" + value2 + "</td>" + "</table>";
}
table += "</tr>";
You should be using single quotes inside double-quoted strings, like this
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td class='one'>" + value1 "</td>" + "<td class='two'>" + value2 + "</td>" + "</table>";
}
table += "</tr>";
I got the values throw sDocStr. and now i need to send sDocStr values to that html table.. can anyone help me.
function myFunction()
{
document.write(sDocStr);
mytable += "<html><table>";
mytable += "<tr><td style='font-family:Trebuchet MS;font-size:12px;font-weight:bold;font-style:italic;'>sDocStr</td></tr>";
mytable += "</table></html>";
}
you can do this :
function myFunction() {
document.write(sDocStr);
mytable += "<html><table>";
mytable += "<tr><td style='font-family:Trebuchet MS;font-size:12px;font-weight:bold;font-style:italic;'>" + sDocStr + "</td></tr>";
mytable += "</table></html>";
}
is that ok for you ?
Try following:
function myFunction()
{
//considering cDocStr has some value
var mytable='';
mytable += "<table>";
mytable += "<tr><td style='font-family:Trebuchet MS;font-size:12px;font-weight:bold;font-style:italic;'>"+sDocStr+"</td></tr>";
mytable += "</table>";
document.write(mytable);
}
Need To Add/Remove Class from TD of table, based on check-box selection. By Default all the TD will be hidden. While selecting check-box, i need to enable the respective column alone.
JSFiddle : http://jsfiddle.net/eVj8V/2/
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
.hideThis {display: none;}
td, th {
border: thin solid;
}
</style>
<script>
function constrctTable() {
var TableRef = document.getElementById("TableConstruction");
TableRef.innerHTML = "";
var table = "";
table += "<table>";
table += "<tr style='border: inherit;' id='tableColumns'>";
table += "<td>S.No</td>";
table += "<td>Name</td>";
table += "<td class=hideThis>Employee No</td>";
table += "<td class=hideThis>Manager No</td>";
table += "<td class=hideThis>Clerk No</td>";
table += "</tr>";
for(i=0; i<5; i++) {
table += "<tr class=recordRow>";
table += "<td>"+i+"</td>";
table += "<td>Raj "+i+"</td>";
table += "<td class=hideThis name='Employee'>"+ i +"</td>";
table += "<td class=hideThis name='Manager'>"+ i +"</td>";
table += "<td class=hideThis name='Clerk'>"+ i +"</td>";
table += "</tr>";
}
table += "</table>";
TableRef.innerHTML = table;
}
function enableEmployee(enableRef) {
var compRef = document.getElementById('employee').checked;
if(compRef){
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
} else {
$('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}
}
function enableManager(enableRef) {
var compRef = document.getElementById('manager').checked;
if(compRef){
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
} else {
$('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}
}
function enableClerk(enableRef) {
var compRef = document.getElementById('clerk').checked;
if(compRef){
$('.hideThis:contains(' + enableRef + ')').removeClass('hideThis');
$('.recordRow td.hideThis[name=' +enableRef+ ']').removeClass('hideThis');
} else {
$('.hideThis:contains(' + enableRef + ')').addClass('hideThis');
$('.recordRow td.hideThis[name !=' +enableRef+ ']').addClass('hideThis');
}
}
</script>
</head>
<body onload="constrctTable();">
<div id="TableConstruction"> </div>
<input type='checkbox' id='employee' onclick='enableEmployee("Employee")'>Employee</input>
<input type='checkbox' id='manager' onclick='enableManager("Manager")'>Manager</input>
<input type='checkbox' id='clerk' onclick='enableClerk("Clerk")'>Clerk</input>
</body>
</html>
Thanks in advance.
I have modified your code to make it simple.Try this.
$(document).on('change','input[type="checkbox"]',function(){
var compRef = this.checked;
if(compRef){
$("tr td:contains('"+$(this).attr('name')+"')").removeClass('hideThis');
$("tr td[name='"+$(this).attr('name')+"']").removeClass('hideThis');
}else{
$("tr td:contains('"+$(this).attr('name')+"')").addClass('hideThis')
$("tr td[name='"+$(this).attr('name')+"']").addClass('hideThis');
}});
Working Demo