We help IT Professionals succeed at work.

short javascript or jquery script function for div

I need the shortest way - minimum lines script function that will input 2 numbers
for example function(2,3)
2 is the red and 3 is the black
will draw a div or table structure as attached.
 
 2 is the red and 3 is the black
Comment
Watch Question

F IgorDeveloper

Commented:
You need to clarify what to expect with this 2 parameters (change the width, border,  fill ) ??
Top Expert 2013

Commented:
function addtable()
{ 
   document.body.innerHTML+='<table><tr><td>2</td><td>3</td></tr></table>';
 }

Open in new window


Now if you want to do something useful with it post some detail and we will refine it.
Is Black the box width and red the fill width?  If so, how about this:
<HTML>
<HEAD>
<script type="text/javascript">
  function setProgressBar(redWidth, blackWidth) {
    document.getElementById("progress_bar").style.width = redWidth;
    document.getElementById("progress_bar_box").style.width = blackWidth;
  }
</script>
</HEAD>

<BODY>
<form>
<div style="margin-left: 25%; margin-right: 25%">
  <div id="progress_bar_box" style="border: 3px solid black; width: 300px;">
    <div id="progress_bar" style="border: 0px; width: 200px; background-color: red;"></div>
  </div>
  <br />
  <input id="txtRed" type="text" size="5" value="200">&nbsp;&nbsp;&nbsp;<input id="txtBlack" type="text" size="5" value="300">
  <input id="btnChange" type="button" value="Change" onClick="javacript:setProgressBar(document.getElementById('txtRed').value, document.getElementById('txtBlack').value);">
</div>
</form>
</BODY>
</HTML>

Open in new window

Author

Commented:
judgeking, its not working on firefox, i added height so it would be seen but all the form is black:(
COBOLdinosaur, i added your script inside html code and that is not working:(

Author

Commented:
judgeking, I fixed the code with adding height inside the style, but i need this code created by the script because i will run an sql loop so there might be 100 rows and i need this script to build those 100 rows.

<div style="margin-left: 25%; margin-right: 25%">
  <div id="progress_bar_box" style="border: 3px solid black; height:50px; width: 300px;">
    <div id="progress_bar" style="border: 0px; width: 200px;height:50px; background-color: red;"></div>
  </div>
Sorry, just add a space in the red div.
<HTML>
<HEAD>
<script type="text/javascript">
  function setProgressBar(redWidth, blackWidth) {
    document.getElementById("progress_bar").style.width = redWidth;
    document.getElementById("progress_bar_box").style.width = blackWidth;
  }
</script>
</HEAD>

<BODY>
<form>
<div style="margin-left: 25%; margin-right: 25%">
  <div id="progress_bar_box" style="border: 3px solid black; width: 300px;">
    <div id="progress_bar" style="border: 0px; width: 200px; background-color: red;">&nbsp;</div>
  </div>
  <br />
  <input id="txtRed" type="text" size="5" value="200">&nbsp;&nbsp;&nbsp;<input id="txtBlack" type="text" size="5" value="300">
  <input id="btnChange" type="button" value="Change" onClick="javacript:setProgressBar(document.getElementById('txtRed').value, document.getElementById('txtBlack').value);">
</div>
</form>
</BODY>
</HTML>

Open in new window

Sorry, we both posted at the same time.  Adding the height is a good idea.

Are you saying there may be 100 progress bars (I'm assuming that's what this is), and you want to build them dynamically?  How are you calling your DB?  Why not build this in your server code?
Top Expert 2013

Commented:
COBOLdinosaur, i added your script inside html code and that is not working:(


Then either coded it incorrectly, or you didn't trigger an event to fire the function it works fin in all my browser.
Top Expert 2013

Commented:
Oh and for what ever styling you need just put a class in as you generate.

function addtable()
{ 
   document.body.innerHTML+='<table><tr><td class="redcls">2</td><td class="blackcls">3</td></tr></table>';
 }

Open in new window

Author

Commented:
judgeking, i use sql server
my table name is "folder_table" and it has 2 columns: "space_in_folder" and "files_in folder"
i need to print in this way all the rows inside the table.
i use c# with asp.net.
i thought abut printhing a query and running a script recursively.

will be more than happy if you will post a code with your way of doing it.
A simple way would be to have a table on your page, then dynamically add rows in your code-behind.  Here's a simple example in VB.NET
<asp:Table ID="tblData" runat="server" width="100%" height="100%" CellSpacing="0" CellPadding="0">
</asp:Table>

Open in new window

Dim oRow As System.Web.UI.WebControls.TableRow
Dim oCell As System.Web.UI.WebControls.TableCell
Dim oDiv As System.Web.UI.HtmlControls.HtmlGenericControl

'loop through records
'do while not eof
  oRow = New System.Web.UI.WebControls.TableRow
  oCell = New System.Web.UI.WebControls.TableCell
  oDiv = New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
  oDiv.InnerHtml = "<div style='border: 3px solid black; width: " & iSpaceInFolder & "px;'>"
  oDiv.InnerHtml &= vbNewLine & "  <div style='border: 0px; background-color: red; width: " & iFilesInFolder & "px;'>&nbsp;</div>"
  oDiv.InnerHtml &= vbNewLine & "</div>"
  oCell.Controls.Add(oDiv)
  oRow.Cells.Add(oCell)
  tblData.Rows.Add(oRow)
'loop

Open in new window

Here's a c# example:

int iSpaceInFolder, iFilesInFolder;
System.Web.UI.WebControls.TableRow oRow;
System.Web.UI.WebControls.TableCell oCell;
System.Web.UI.HtmlControls.HtmlGenericControl oDiv;

while (true)
//loop through records
//do while not eof
{
    oRow = new System.Web.UI.WebControls.TableRow();
    oCell = new System.Web.UI.WebControls.TableCell();
    oDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
    iSpaceInFolder = 200; //get value from DB, convert to meaningful width
    iFilesInFolder = 100; //get value from DB, convert to meaningful width

    oDiv.InnerHtml = "<div style='border: 3px solid black; width: " + iSpaceInFolder + "px;'>";
    oDiv.InnerHtml += Environment.NewLine + "  <div style='border: 0px; background-color: red; width: " + iFilesInFolder + "px;'>&nbsp;</div>";
    oDiv.InnerHtml += Environment.NewLine + "</div>";
    oCell.Controls.Add(oDiv);
    oRow.Cells.Add(oCell);
    tblData.Rows.Add(oRow);
}

Open in new window

SA85, any update?

Explore More ContentExplore courses, solutions, and other research materials related to this topic.