添加文本值以动态创建文本输入

Adding text values to dynamically create text inputs

本文关键字：文本 创建 输入 动态 添加      更新时间：2023-09-26

这是所有内容，我试图提出一个建议，它可以改变行的颜色，但它只改变一次，之后的每一行都保留为 .odd 背景颜色。

基本上，我正在尝试动态添加行，这有效，屏蔽输入文本字段，这是有效的，从endtime_1中获取值，并在单击addrow()按钮时将其放在下一个添加行的starttime_2(dynamic add)中。然后取endtime_2(dynamic add)的值，并在单击addrow()按钮时将其放入starttime_3(dynamic add)，依此类推，依此类推。这是行不通的。我还想用背景样式为每个奇数行着色。

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

用纯 CSS 为表格行着色：

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

否则，请提出有针对性的问题。

相关文章：