SO - 16556192

by Arun P Johny

HTML

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<table class="config" id="status_table">
    <thead>
        <tr>
            <th colspan="4" ; style="padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Output Status</th>
        </tr>
        <tr>
            <th>Index</th>
            <th>Row ID</th>
            <th>Feedback Type</th>
            <th>Feedback Number</th>
            <th>Status</th>
            <th>Monitor?</th>
            <th>Remove?</th>
        </tr>
    </thead>
    <tbody>
        <tr></tr>
    </tbody>
</table>
<input type="submit" class="monitor" id="monitor" value="Monitor" disabled="true"/>
<div id="display" style=" clear:both">
    <div class="left" style="float:left; width:48%">
        <div data-role="fieldcontain">
            <label for="select-choice-1" class="select">Select Category</label>
            <select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-mini="true" size="2">
                <option value="arm" id="arm">Arm</option>
                <option value="zone" id="zone">Zone_Input</option>
                <option value="output" id="output">Output</option>
                <option value="counter" id="counter">Counter</option>
                <option value="flag" id="flag">Flag</option>
                <option value="sensor" id="sensor">Sensor</option>
            </select>
        </div>
        <div id="test"></div>
    </div>
    <div class="right" style=" float: right; width:48%">
        <div id="armText">
            <fieldset data-role="controlgroup">
                <legend>Unit</legend>
                <input type="checkbox" class="CB" name="armCB_1" id="armCB_1" class="custom" data-mini="true" />
                <label for="armCB_1">Arming Status</label>
            </fieldset>
       ...

JavaScript

$('#display div[id$="Text"]').hide();
$('#armStatus').hide();

$('#select-choice-1').change(function () {
    $('#display div[id$="Text"]').hide();
    $('#armStatus').hide();
    
    if ($('#arm').is(':selected')) {
        $('#armText').show();
        arming();
    } else {
        var selected = $(this).find('option:selected').val();
        $('#' + selected + 'Text').show();
        addText(selected, selected);
    }
    
});


function alreadyExist(number, type) {
    testEntry = false;
    $('#status_table tr').each(function () {
        if ($('td:nth(2)', $(this)).html() === type) {
            if ($('td:nth(3)', $(this)).html() === number) {
                testEntry = true;
            }
        }
    })
    return testEntry;
}

$('input[id$="Add"]').click(function () {
    var fb_type = $(this).data('fbtype');
    $('.TextInput').empty();
    textInput = $("#" + fb_type + "TextInput").val();
    
    if (textInput.length === 0) {
        alert('please enter the fieldname');
        return;
    }
    index = $('#status_table tbody tr').last().index() + 1;
    
    type = $("#select-choice-1").find(":selected").text();
    
    rowID = type + textInput;
    
    
    var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' + textInput + '</td>' + '<td id="status_' + rowID + '"></td>' + '<td><input type="checkbox" name="CB" id="monitor_' + rowID + '" class="custom" class="checkbox1"data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' + '</tr>';
    if (alreadyExist(textInput, type)) {
        alert('Entry exists. Please enter another number.')
    } else {
        $('#status_table tr:last').after(str);
    }
    if(index===1){
        $('#monitor').removeAttr('disabled');
    }
});


$('#monitor').click(function () {
    $('#monitor').prop('disabled',true);
    bigloop=setInterval(function () {
        var checked =...