テキスト入力を動的に作成するためにテキスト値を追加する

Question

ここにすべてがあります。提案を入れようとしましたが、行の色を変更するには問題ありません。奇妙な背景色。

基本的には、動的に行を追加しようとしていますが、動作する入力テキストフィールドをマスクし、endtime_1から値を取り出し、次の行のstarttime_2（動的追加）に配置します。 ）ボタンをクリックします。 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;} 

そうでない場合は、ターゲットを絞った質問してください。