Question

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

当我点击“+”按钮时，它会添加一个选项，其中包含为下面的select元素指定的姓氏和名字。现在，它添加了在姓氏和名字之间只有一个空格的选项，但我希望第一个名称与上面的“名字”文本框对齐。

以下是我的示例代码：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
}

的 DEMO

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）。使用monospace font-family可确保宽度与字符数一致。

根据元素宽度向javascript字符串添加空格

2 个答案: