有没有办法只使用javascript从html表格行中的第一个单元格获取值？

Question

我试图弄清楚如何从 HTML 表中选定行的第一列中获取值，我正在使用使用此 js 代码创建的按钮选择行：

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);
});

该表是使用 stringbuilder 从后面的代码创建的，我尝试过的是：

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();

然后我想获取选定的行 id，我尝试过：

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

您可以使用querySelector来获取第一个元素。 如果它有多个相似的元素，它总是得到第一个。

您的单元格也没有价值。 您应该改用innerText 。

 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>