I want table row 1 data without on click event

Question

I want table's one row data without on click event.i am making an voice control app therefore on saying 'one' i want to display row 1 data and so on...

HTML:

<div id="Inbox" class="w3-container city">
     <table id="Inbox1"></table>
</div>

JAVASCRIPT:

function getInbox() {
    $.ajax({
        cache: false,
        type: "GET",
        url: "/Home/getInbox",
        dataType: 'json',
        success: function (data) {
            $('#Inbox1 tr').remove();
            var tr;
            var div;
            for (var i = 0; i < data.length; i++) {
                tr = $('<tr/>');
                tr.append("<td style='text-align:left; display:none'>" + data[i].emailUid + "</td>");
                tr.append("<td style='text-align:left'>" + data[i].emailFrom + "</td>");
                tr.append("<td style='text-align:left'><b>" + data[i].emailSubject + "</b> - " + data[i].emailBody + "</td>");
                tr.append("<td style='text-align:right'>" + ParseJsonDate(data[i].emailTime) + "</td>");
                $('#Inbox1').append(tr);
            }
        },  
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
}

This is how i made the table,/.. now want to show row1 data only in a div..

Answer 1

Please find an example. Sample code for row display

test = function() {
    $('tr').hide();
    $('tr:nth-child(' + $("#input").val() + ')').show();
}

Answer 2

$("#Inbox1 tr:first td").each(function() {
    console.log($(this).text());
})

Answer 3

i found a way to call any of the row's data without onclick. here's my function:

function openInbox1(i1) {
    var x1 = document.getElementsByClassName("city");
    for (i = 0; i < x1.length; i++) {
        x1[i].style.display = "none";
    }
    $('#Inboxread').show();
    var oTable = document.getElementById('Inbox1');
    var oCells = oTable.rows.item(i1).cells;
    $('#Inbox23 tr').remove();
    $("#ifrom").remove();
    $("#isubject").remove();
    $("#ibody").remove();
    tr = $('<tr/>');
    tr.append("<td style='text-align:left; display:none'>" + oCells.item(0).innerHTML + "</td>");
    tr.append("<td style='text-align:left'>" + oCells.item(1).innerHTML + "</td>");
    tr.append("<td style='text-align:left'>" + oCells.item(2).innerHTML + "</td>");
    tr.append("<td style='text-align:right'>" + oCells.item(3).innerHTML + "</td>");
    $('#Inbox23').append(tr);
    $('#ifrom').append("<p>From: </p>" + oCells.item(1).innerHTML);
    var xyz = oCells.item(2).innerHTML;
    var x = xyz.split('<b>').join('');
    var x = x.split('</b>');
    var xx = x[0];
    var y = x[1];
    y = y.split(" - ").join('');
    $('#isubject').append("<p>Subject: </p>" + xx);
    $('#ibody').append("<p>" + y + "</p>");
    }

by calling openInbox1(0); , i can get the first row data in another div.. here's the div tag which will be used to display row 1 data, and i will use text to voice to read it

<div id="Inboxread" class="w3-container city1">
    <button onclick="openTab(event, 'Inbox'); getInbox();">Back</button>
    <table id="Inbox23"></table>
    <h2 id="ifrom"></h2>
    <h2 id="isubject"></h2>
    <h2 id="ibody"></h2>
    <div id="outer">
        <div class="inner"><button class="msgBtn" onclick="openReply1();">Reply</button></div>
        <div class="inner"><button class="msgBtn2" onclick="openForward1();">Forward</button></div>
        <div class="inner">
        @using (Html.BeginForm("SendDelete", "Home", FormMethod.Post, new { @class = "myform;form-horizontal", @id = "sendMail", @name = "sendMail" }))
        {
            @Html.TextBox("UIDd", null, new { @type = "text", @id = "UIDd", @name = "UIDd", @placeholder = "UID", @style = "display:none;border-style: none; background: transparent; width: 100%; border-bottom: 1px solid grey; outline:none;" })
            <button class="msgBtnBack" onclick="deletem();">Delete</button>
        }
        </div>
    </div>
</div>