style is not working in variable in javascript

Question

enter image description here

here two textboxes are not aligned center..so i want to give margin-left to that textbox..but that textboxes are coming dynamically from javascript..

Here is my code:

<table class="table" id="table1">
    <thead>
        <tr>
            <th style="padding-left: 115px;">No of tables</th>
            <th>
                <div class="col-lg-1"></div>
                No of person
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="success">
            <td style="padding-left: 145px;">
                1
            </td>
            <td>
                <div class="col-lg-4"></div>
                <div class="col-lg-5">
                    <input type="text" class="form-control uniform-input text" required="true">
                </div>
            </td>
        </tr>
        <tr class="error">
            <td style="padding-left: 145px;">
                2
            </td>
            <td>
                <div class="col-lg-4"></div>
                <div class="col-lg-5">
                    <input type="text" class="form-control uniform-input text" required="true">
                </div>
            </td>
        </tr>
        :
        <tr class="info">
            <td style="padding-left: 145px;">
                7
            </td>
            <td>
                <div class="col-lg-4"></div>
                <div class="col-lg-5">
                    <input type="text" class="form-control uniform-input text" required="true">
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>
<br />
<br />
<button class="btn btn-primary" href="#" onclick="addRow();">Add More</button>
</div>
</div>

JAVAscript :: Function Addrow()::

<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
  var tbl = document.getElementById('table1');
  var lastRow = tbl.rows.length;
  var iteration = lastRow - 1;
  var row = tbl.insertRow(lastRow);
  var firstCell = row.insertCell(0);
  var secondCell = row.insertCell(1);
  var el = document.createElement('input');
  var e2 = document.createElement('input');

  el.type = 'text';
  el.name = 'name_' + i;
  el.id = 'name_' + i;
  el.size = 15;

  el.maxlength = 15;

  firstCell.appendChild(el);

  e2.type = 'text';


  e2.name = 'name_' + i;
  e2.id = 'name_' + i;
  e2.size = 15;
  e2.maxlength = 15;

  secondCell.appendChild(e2);

 // alert(i);
  i++;
  frm.h.value=i;
//  alert(i);
 }
 </script>

I already tried e1.style.marginLeft="88px"; and also tried to create one class , give margin-left in that class but It also not working..Please help me.. Again I want to say th problem: to give margin that textbox which create dynamically from javascript....Thanks

wallop · Accepted Answer · 2015-05-11 06:43:42Z

1

var el = document.createElement('input');
var e2 = document.createElement('input');
e1.style.cssText = "margin-left:xx";
e2.style.cssText= "margin-left:xx";

else

var el = document.createElement('input');
var e2 = document.createElement('input');
e1.className = "dyn-tb";
e2.className = "dyn-tb";

and in css

.dyn-tb {
margin-left: xx;
}

answered May 11, 2015 at 6:43

wallop

2,6011 gold badge29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vidhi Over a year ago

Error: Uncaught Reference Error:e1 is not defined in javascript

JGV · Accepted Answer · 2015-05-11 06:32:39Z

Are you looking something like this? As you have not provided your css, this code sample might not have the same look and feel but, the idea is to align the dynamic textboxes.

var i=1;
function addRow()
{
  var tbl = document.getElementById('table1');
  var lastRow = tbl.rows.length;
  var iteration = lastRow - 1;
  var row = tbl.insertRow(lastRow);
  var firstCell = row.insertCell(0);
  var secondCell = row.insertCell(1);
  var el = document.createElement('input');
  var e2 = document.createElement('input');

  el.type = 'text';
  el.name = 'name_' + i;
  el.id = 'name_' + i;
  el.size = 15;
  el.className = 'right';

  el.maxlength = 15;

  firstCell.appendChild(el);

  e2.type = 'text';


  e2.name = 'name_' + i;
  e2.id = 'name_' + i;
  e2.size = 15;
  e2.maxlength = 15;

  secondCell.appendChild(e2);

 // alert(i);
  i++;
  frm.h.value=i;
//  alert(i);
 }

.right{
  float:right;
  }

<table class="table" id="table1">
                                         <thead>
                                            <tr>
                                               <th style="padding-left: 115px;">No of tables</th>
                                               <th>
                                                  <div class="col-lg-1"></div>
                                                  No of person
                                               </th>
                                            </tr>
                                         </thead>
                                         <tbody>
                                            <tr class="success">
                                               <td style="padding-left: 145px;">
                                                  1
                                               </td>
                                               <td>
                                                  <div class="col-lg-4"></div>
                                                  <div class="col-lg-5">
                                                     <input type="text" class="form-control uniform-input text" required="true">
                                                  </div>
                                               </td>
                                            </tr>
                                            <tr class="error">
                                               <td style="padding-left: 145px;">
                                                  2
                                               </td>
                                               <td>
                                                  <div class="col-lg-4"></div>
                                                  <div class="col-lg-5">
                                                     <input type="text" class="form-control uniform-input text" required="true">
                                                  </div>
                                               </td>
                                            </tr>
                                          :

                                            <tr class="info">
                                               <td style="padding-left: 145px;">
                                                  7
                                               </td>
                                               <td>
                                                  <div class="col-lg-4"></div>
                                                  <div class="col-lg-5">
                                                     <input type="text" class="form-control uniform-input text" required="true">
                                                  </div>
                                               </td>
                                            </tr>

                                         </tbody>
                                      </table>
                                   </div>
                                </div>
                                <br />

                                <br />
                                <button class="btn btn-primary" href="#" onclick="addRow();">Add More</button>
                             </div>

                             </div>

Error: Uncaught Reference Error:e1 is not defined in javascript

Hardy · Accepted Answer · 2015-05-11 06:44:31Z

1

Add style to parent of your input "e1" :

firstCell.className = "centerContent"; 

.centerContent {
    text-align: center;
    float: none;
}

answered May 11, 2015 at 6:44

Hardy

5424 silver badges10 bronze badges

1 Comment

Vidhi Over a year ago

Error: Uncaught Reference Error:e1 is not defined in javascript

Karthik N · Accepted Answer · 2015-05-11 07:01:43Z

1

You can set the css style property using eg:

var el = document.createElement('input');
el.type = 'text';
el.name = 'name_' + i;
el.id = 'name_' + i;
el.size = 15;
el.maxlength = 15;
el.style.cssText = 'float:right;';

edited May 11, 2015 at 7:01

answered May 11, 2015 at 6:41

Karthik N

9518 silver badges16 bronze badges

3 Comments

Vidhi Over a year ago

Error: Uncaught Reference Error:e1 is not defined in javascript

Karthik N Over a year ago

Change the e1 to el "el.style.cssText = 'float:right;';"

Karthik N Over a year ago

In the code you have posted it is 'el'. Please cross check you code.

Amit Soni · Accepted Answer · 2015-05-11 06:43:48Z

0

You can use textAlign property in row to align your input to center

like this

row.style.textAlign = "center";

answered May 11, 2015 at 6:43

Amit Soni

1,4271 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

style is not working in variable in javascript

5 Answers 5

1 Comment

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related