요소 폭에 따라 javascript 문자열에 공백 추가

Question

두 개의 텍스트 상자 (성 및 이름)에서 선택 목록에 사용자를 추가 할 수있는 양식이 있습니다.

"+"버튼을 클릭하면 아래의 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"는 둘 다 5 문자 임에도 불구하고 "lllll"보다 넓습니다). 또한 "clientWidth"속성을 발견했지만 제대로 작동하지 않는 것처럼 보입니다.

당신을 :) 감사

대신 textNode 설정할 수있는 창조의

Answer 1

, 이 멍청이 나를 위해 D :

업데이트 바이올린 : 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 : 나는 (이 경우 31) 원하는 폭에 도달 할 때까지

#lbxname 
{ 
    font-family: monospace; 
} 

는 기본적으로, 문자열에 공백을 추가 할 수 있습니다. 모노 스페이스 글꼴 - 패밀리를 사용하면 너비가 문자 수와 일치하는지 확인합니다.

Answer 2

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 charlietfl의 대답과 Evilzebra의 의견을 바탕으로