0

ここにすべてがあり、提案を入れようとしましたが、行の色を変更することで機能しますが、一度だけ変更し、すべての行が.odd背景色のままになります。

基本的に、私は行を動的に追加しようとしています。これは機能し、入力テキストフィールドをマスクして機能し、から値を取得し、ボタンがクリックされたときに次の追加行にendtime_1入れます。次に、の値を取り、ボタンがクリックされたときにそれを入れます....それは機能していません。背景のスタイリングで奇数行のそれぞれにも色を付けたいと思います。starttime_2(dynamic add)addrow()endtime_2(dynamic add)starttime_3(dynamic add)addrow()

<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>
4

1 に答える 1

0

純粋な css で表の行に色を付けます。

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

それ以外の場合は、的を絞った質問をしてください。

于 2012-08-21T02:05:51.857 に答える