is there a way to get the value from the first cell in html table row using javascript only?

Question

I'm trying to figure out how to get the value from the first column of selected row inside the HTML table i'm selecting the row using button created using this js code :

let tr = document.querySelectorAll("table tbody tr");

Array.from(tr).forEach(function (trArray) {
    let button = document.createElement("i");
    let td = document.createElement("td");
    button.innerText = "";
    button.className = "fa fa-eye";
    button.style.color = "black";
    button.hidden = "hidden";
    button.onmouseover = "this.style.cursor='pointer'";
    button.onclick = "viewrow(this)";
    button.setAttribute("onclick", "viewrow(this)");
    td.append(button);
    trArray.append(td);
});

the table is created from code behind using stringbuilder what I tried is this:

StringBuilder sb = new StringBuilder();
                    sb.Append("<table id=" + "contractstable" + " runat=" + "server" + " " + "class=" + "table" + " >");
                    sb.Append("<caption>البنود</caption>");
                    sb.Append("<thead>");
                    sb.Append("<tr>");
                    sb.Append("<th>رقم البند</th>");
                    sb.Append("<th>رقم الفاتورة</th>");
                    sb.Append("<th>صنف البند</th>");
                    sb.Append("<th>سعر القطعة</th>");
                    sb.Append("<th>القيمة</th>");
                    sb.Append("<th>الخصم</th>");
                    sb.Append("<th>المجموع</th>");
                    sb.Append("<th>حذف</th>");
                    sb.Append("</tr>");
                    sb.Append("</thead>");
                    sb.Append("<tbody id=" + "mytbody" + ">");
                    foreach (DataRow dr in dt.Rows)
                    {
                        sb.Append("<tr><td data-label=" + "رقم-البند" + ">" + dr["contract_id"]
                    + "</td><td data-label= " + "رقم-الفاتورة" + " > " + dr["bill_id"]
                    + "</td><td data-label=" + "صنف-البند" + ">" + dr["contract_category"]
                    + "</td><td data-label=" + "سعر-القطعة" + ">" + dr["item_price"]
                    + "</td><td data-label=" + "القيمة" + ">" + dr["amount"]
                    + "</td><td data-label=" + "الخصم" + ">" + dr["discount"]
                    + "</td><td data-label=" + "المجموع" + ">" + dr["total"] + "</td></tr>");
                    }
                    sb.Append("</tbody>");
                    sb.Append("</table>");
                    ltrTable.Text = sb.ToString();

then i want to get the selected row id , what i have tried :

function deleterow(element) {
    var mytbody = document.getElementById("mytbody");
    var firstchild = mytbody.querySelector("td");
    var allName = firstchild.innerText;
    var hiddentext2 = document.getElementById("myrow_id");
    hiddentext2.focus();
    hiddentext2.value = allName;
    hiddentext2.blur();
}

Answer 1

You can use querySelector to get the first element. If it has more than one of similar elements, it always gets the first one.

Your cell does not have value either. You should use innerText instead.

 function getrowid(element) { var mytbody = document.getElementById("mytbody"); var firstchild = mytbody.querySelector("td"); var allName = firstchild.innerText; console.log(allName) } getrowid()

 <table> <tbody id="mytbody"> <tr> <td>First</td> <td>Second</td> </tr> <tr> <td>Third</td> <td>Fourth</td> </tr> </tbody> </table>

Answer 2

 const tbody = document.querySelector("#myTbale > tbody"); const tds = tbody.querySelectorAll("td"); let tdVal = []; tds.forEach(td => { tdVal.push(td.innerText); }) console.dir(tdVal[0]);

 <table border="1" id="myTbale"> <thead> <th>header 1</th> <th>header 2</th> </thead> <tbody> <tr> <td>1st cell</td> <td>1st cell</td> </tr> </tbody> </table>