CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vidhi
Vidhi

Reputation: 409

style is not working in variable in javascript

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

Upvotes: 0

Views: 94

Answers (5)

Karthik N
Karthik N

Reputation: 951

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;';

Upvotes: 1

Hardy
Hardy

Reputation: 542

Add style to parent of your input "e1" :

firstCell.className = "centerContent"; 

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

Upvotes: 1

Amit Soni
Amit Soni

Reputation: 1427

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

like this

row.style.textAlign = "center";

Upvotes: 0

wallop
wallop

Reputation: 2571

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;
}

Upvotes: 1

JGV
JGV

Reputation: 5187

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>

Upvotes: 1

Related Questions