동적으로 텍스트 입력을 만들기 위해 텍스트 값 추가하기

Question

여기에 모든 것이 있습니다. 제안 사항을 넣으려고했는데 행의 색상을 변경하는 것과 비슷하지만 한 번만 변경하고 이후에는 모든 행을 변경합니다. 이상한 배경색.

기본적으로 동적으로 행을 추가하려고하는데 작동하는 입력 텍스트 필드를 마스크하고 endtime_1에서 값을 가져 와서 다음에 추가 된 행의 starttime_2 (동적 추가)에 넣습니다. addrow () 버튼을 클릭합니다. addrow() 버튼을 클릭하면 endtime_2 (동적 추가) 값을 가져 와서 starttime_3 (동적 추가)에 넣습니다. 등등 등등 .... 그것은 작동하지 않습니다. 홀수 번호의 행마다 배경 스타일을 지정하여 색상을 지정하고 싶습니다.

도움을 미리 감사드립니다. 에리히

<script type="text/javascript"> 
function maskInput(){ 
    $.mask.definitions['~'] = "[+-]"; 
    $(".time").mask("99:99 aa"); 

    $("input").blur(function() { 
     $("#info").html("Unmasked value: " + $(this).mask()); 
    }).dblclick(function() { 
     $(this).unmask(); 
    }); 
} 
var clone; 
function cloneRow(){ 
    var rows=document.getElementById('TimeCard').getElementsByTagName('tr'); 
    var index=rows.length-1; 
    clone=rows[index-0].cloneNode(true); 
    if (index % 2 !=0) { $(clone).addClass("odd"); } 
    var inputs=clone.getElementsByTagName('input'), inp, i=0,n ; 
    while(inp=inputs[i++]){ 
     inp.name=inp.name.replace(/\d/g,'')+(index+1); 
     $('#starttime_'+index).attr('value',$('#endtime_'+index-1).attr('value')); 
    } 
    var select=clone.getElementsByTagName('select'), sel, i=0,n ; 
    while(sel=select[i++]){ 
     sel.name=sel.name.replace(/\d/g,'')+(index+1); 
    } 
    maskInput(); 
    } 
    function addRow(){ 
     var tbo=document.getElementById('TimeCard').getElementsByTagName('tbody')[0]; 
     tbo.appendChild(clone); 
     cloneRow(); 
    } 
    function checkDOM(){ 
     var rows=document.getElementById('TimeCard').getElementsByTagName('tr'); 
     for(var i=0;i<rows.length;i++){ 
     alert(rows[i].getElementsByTagName('input')[0].name); 
    } 
} 
onload=cloneRow; 
</script> 

<style type="text/css"> 
.odd { background-color:#CCC; } 
</style> 

<table border='0' id='TimeCard' width='950'> 
<tr class="odd"> 
    <td align="left" width="100"><b><i><u>Select Type</u></i></b></td> 
     <td align="left" width="20">&nbsp;</td> 
     <td align="left" width="100"><b><i><u>Select Property</u></i></b></td> 
     <td align="left">&nbsp;</td> 
     <td align="left" width="100"><b><i><u>Start Time</u></i></b></td> 
     <td align="left" width="100"><b><i><u>End Time</u></i></b></td> 
     <td align="left" width="20">&nbsp;</td> 
</tr> 
<tr class="even"> 
    <td align="left" width="100"> 
     <select name="type_1" id="type_1" class="validate[required]"> 
      <option selected value=''> -- Please Select -- </option> 
      <option value="office">Office</option> 
      <option value="work">Working</option> 
      <option value="drive">Driving</option> 
      <option value="break">Break</option> 
      <option value="lunch">Lunch</option> 
      <option value="personal">Personal</option> 
    </select> 
     </td> 
     <td align="left" width="20">&nbsp;</td> 
     <td align="left" width="100"> 
     <select name="propid_1" id="propid_1" class="validate[required]"> 
      <option selected value=''> -- Please Select -- </option> 
     </select> 
     </td> 
     <td align="left">&nbsp;</td> 
     <td align="left" width="100"><input type="text" class="time" id="starttime_1" name="starttime_1" size="10" /></td> 
    <td align="left" width="100"><input type="text" class="time" id="endtime_1" name="endtime_1" size="10" /></td> 
     <td align="center" width="20"><input type="button" value=' + ' onclick='addRow();' /></td> 
</tr> 
</table> 

Answer 1

색상 순수 CSS에서 테이블 행 :

tr:nth-child(odd) {background-color:#CCC;} 

그렇지 않으면, 대상 질문을하시기 바랍니다.