根据元素宽度在JavaScript字符串中添加空格

Question

我有一个表单可以将用户添加到2个文本框（姓和名）的选择列表中。

当我单击“ +”按钮时，它将为以下选择元素添加一个选项，该选项具有姓氏和名字。 现在，它添加的选项在姓和名之间只有一个空格，但是我希望名字与上面的“名字”文本框对齐。

这是我的示例代码的小提琴： http : //jsfiddle.net/fx37j71s/12/

<table>
<tr>
    <td>Last Name</td>
    <td>First Name</td>
</tr>
<tr>
    <td><input type="text" id="txtlastname" /></td>
    <td><input type="text" id="txtfirstname" /></td>
    <td><input type="button" value="+" onclick="addemployee();" /></td>
</tr>
<tr>
    <td colspan="2"><select id="lbxname" size="5" style="width:500px"></select></td>
    <td valign="top"><input type="button" value="-"onclick="removeemployee();" /></td>
</tr>
</table>

还有addemployee（）函数：

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');
    var text = document.createTextNode(lastname.value + ' ' + firstname.value);

    option.appendChild(text);
    select.appendChild(option);
}

有没有办法在JS或jquery或CSS中实现此目的？ 我尝试添加固定数量的空格减去“姓氏”中的字符数量，但是字符串的实际宽度取决于字符（即“ PPPPP”比“ lllll”宽，即使它们都有5个字符）。 我还找到了“ clientWidth”属性，但似乎无法使其正常运行。

谢谢 ：）

Answer 1

无需创建textNode即可设置innerHTML

就像是：

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML = padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    while(str.length < 500){
        str += '&nbsp;';
    }    
    return str
}

演示

Answer 2

根据charlietfl的回答和Evilzebra的评论，这对我有用：

更新的小提琴： http : //jsfiddle.net/vcfpd450/2/

function addemployee()
{
    var lastname = document.getElementById('txtlastname');
    var firstname = document.getElementById('txtfirstname');
    var select = document.getElementById('lbxname');
    var option = document.createElement('option');   


    option.innerHTML=padStr(lastname.value) +  firstname.value;   
    select.appendChild(option);
}


function padStr(str){
    var x = str.length;
    while(x < 31){
        str+='&nbsp';
        ++x;
    }    
    return str;
}

CSS：

#lbxname
{
    font-family: monospace;
}

基本上，我在字符串中添加空格，直到达到所需的宽度（在这种情况下为31）。 使用等宽字体系列可确保宽度与字符数一致。