HTML-ввод в таблицу не отвечает onkeyup - PullRequest
Новая
       34

HTML-ввод в таблицу не отвечает onkeyup

0 голосов
/ 28 января 2011

Вот код, инициализирующий мою таблицу: 

<table cellspacing="0">
        <caption id="title4">
            Sprinkles (5 - 6 oz.)
                    </caption>
        <thead>
            <tr>
                <th>&nbsp;</th>
                                    <td >Price</td>
                                    <td >Quantity</td>
                            </tr>
        </thead>
        <tbody>
                        <tr class="statement4">
                <th><label>Lemon</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s1" name="s1" class="field text small" type="text" value="0"/>
                </td>
                            <tr class="statement4">
                <th><label>Sweet Apple</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s2" name="s2" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Caramel</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s3" name="s3" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Cinnamon</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s4" name="s4" class="field text small" type="text" value="0"/>
                </td>

                <tr class="statement4">
                <th><label>Sweet Mocha</label></th>
                                <td title="Yes" >
                    <label>$6.50</label>
                </td>
                                <td title="No" >
                    <input id="s5" name="s5" class="field text small" type="text" value="0"/>
                </td>
                        </tr>
                    </tbody>
    </table>

А вот мой javascript: 

<script type="text/javascript">
var total = 0.0;
var all=new Array();
for(var i = 0; i < 49; i++)
    all[i] = 0;

//....I OMMITTED CODE HERE FOR THE REST OF THE onkeyup FUNCTIONS
document.getElementById("s1").onkeyup = function() {
    if(this.value != "") {
        all[44] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[44] = 0;
    }
    updateIt();
};

document.getElementById("s2").onkeyup = function() {
    if(this.value != "") {
        all[45] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[45] = 0;
    }
    updateIt();
};

document.getElementById("s3").onkeyup = function() {
    if(this.value != "") {
        all[46] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[46] = 0;
    }
    updateIt();
};
document.getElementById("s4").onkeyup = function() {
    if(this.value != "") {
        all[47] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[47] = 0;
    }
    updateIt();
};

document.getElementById("s5").onkeyup = function() {
    document.getElementById("mySpan").innerHTML = "WOAH";

    if(this.value != "") {
        all[48] = (parseInt(this.value,10) * 6.50);
    }
    else {
        all[48] = 0;
    }
    updateIt();
};

function updateIt() {
    var theTotal = 0;
    for(var j = 0; j < 49; j++)
        theTotal += all[j];

    theTotal = all[48];
    document.getElementById("mySpan").innerHTML = "$" + theTotal.toFixed(2);
}
</script>

Обратите внимание, что у меня есть больше таблиц и других функций onKeyUp, но для некоторыхПричина, по которой все таблицы после этой таблицы (у меня около 6 таблиц, и первые 3 работают должным образом), не отвечают на их соответствующие события onkeyup.

Вот код для последней таблицы, которая сработала (этот кодпрямо над кодом, создающим таблицу, которую я разместил выше): 

<table cellspacing="0">
    <caption id="title4">
        Rubs (1.2 - 2.3oz.)
                </caption>
    <thead>
        <tr>
            <th>&nbsp;</th>
                                <td >Price</td>
                                <td >Quantity</td>
                        </tr>
    </thead>
    <tbody>
                    <tr class="statement4">
            <th><label>Buffalo</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs1" name="rubs1" class="field text small" type="text" value="0"/>
            </td>
                        <tr class="statement4">
            <th><label>Chipotle</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs2" name="rubs2" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Citrus</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs3" name="rubs3" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Creole</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs4" name="rubs4" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Crushed Peppercorn & Garlic</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs5" name="rubs5" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Greek</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs6" name="rubs6" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Jamaican Jerk</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs7" name="rubs7" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Lemon Pepper</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs8" name="rubs8" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Moroccan/label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs9" name="rubs9" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Smoky Barbecue</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs10" name="rubs10" class="field text small" type="text" value="0"/>
            </td>

            <tr class="statement4">
            <th><label>Thai Red Curry</label></th>
                            <td title="Yes" >
                <label>$4.25</label>
            </td>
                            <td title="No" >
                <input id="rubs11" name="rubs11" class="field text small" type="text" value="0"/>
            </td>
                    </tr>
                </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 28 января 2011 
var theTotal = 0;
for(var j = 0; j < 49; j++)
    theTotal += all[j];

theTotal = all[48];

Почему ты это делаешь?Сначала вы вычисляете сумму всех цен, а затем присваиваете только последнее значение theTotal.Это кажется мне неправильным.

0 голосов
/ 28 января 2011

Вам не хватает элемента с идентификатором "mySpan", хотя вы ищете его в своем JS (document.getElementById("mySpan").innerHTML), следовательно, он выдает ошибку.

Добавьте элемент HTML с этим идентификатором, и он должен работать.

Проверьте jsfiddle: http://jsfiddle.net/Chandu/yVaMx/5/

...