样式在javascript中不起作用

Question

这里有两个文本框没有对齐center..so我想给该文本框留下页边距..但是文本框是从javascript动态出来的..

这是我的代码：

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

我已经尝试了e1.style.marginLeft="88px";并尝试创建一个类，在该类中给予margin-left但它也没有工作......请帮帮我.. 我想再说一个问题：为javascript动态创建的文本框提供边距....谢谢

Answer 1

你看起来像这样吗？由于您尚未提供css，因此此代码示例可能不具有相同的外观和感觉，但其目的是对齐动态文本框。

＆＃13;

＆＃13;

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

＆＃13;

.right{
  float:right;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用设置css样式属性 例如：

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

Answer 3

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

否则

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

和css

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

Answer 4

将样式添加到输入“e1”的父级：

firstCell.className = "centerContent"; 

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

Answer 5

您可以使用textAlign中的row属性将输入与center对齐

像这样

row.style.textAlign = "center";