How to label ABC in a HTML button and Click events

Question

I created a phone dial pad by using HTML and CSS. This is the Jsfiddle i created for:

http://goo.gl/lP0qdl

I am trying to add abc, def, ghi.... to numbers exactly looks like a phone. But my design messing all the UI. How can I do that ?

And when the user clicks on any button for ex: 2-> first I want to display 2 and A,B,C and 2 again. Similar to smart phones.

I am using JQuery, HTML, CSS.

How can I accomplish that ?

Answer 1

Are you looking for something like

<div id="result"></div>
<table class="dialpad" id="dialPad">
    <tbody>
        <tr>
            <td>
                <input type="button" class="button" value="1" data-values='[1]' />
            </td>
            <td>
                <input type="button" class="button" value="2" data-values='[2, "A", "B", "C"]' />
            </td>
            <td>
                <input type="button" class="button" value="3" data-values='[3, "D", "E", "F"]' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="button" value="4" data-values='[4, "G", "H", "I"]' />
            </td>
            <td>
                <input type="button" class="button" value="5" data-values='[5, "J", "K", "L"]' />
            </td>
            <td>
                <input type="button" class="button" value="6" data-values='[6, "M", "N", "O"]' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="button" value="7" data-values='[7, "P", "Q", "R", "S"]' />
            </td>
            <td>
                <input type="button" class="button" value="8" data-values='[8, "T", "U", "V"]' />
            </td>
            <td>
                <input type="button" class="button" value="9" data-values='[9, "W", "X", "Y", "Z"]' />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="button" value="*" data-values='["*"' />
            </td>
            <td>
                <input type="button" class="button" value="0" data-values='[0, " "]' />
            </td>
            <td>
                <input type="button" class="button" value="#" data-values='["#"]' />
            </td>
        </tr>
    </tbody>
</table>

then

jQuery(function ($) {
    var prev, $result = $('#result'),
        counter = 0,
        timer;
    $('#dialPad input').click(function () {
        var values = $(this).data('values'),
            result = $result.text();
        if (this == prev) {
            result = result.slice(0, -1);
            counter = values.length == counter + 1 ? 0 : counter + 1;
        } else {
            counter = 0;
        }
        $result.text(result + values[counter]);
        prev = this;

        //timer to reset
        clearTimeout(timer)
        timer = setTimeout(function () {
            prev = undefined;
        }, 1000)
    })
})

Demo: Fiddle