有沒有辦法只使用javascript從html表格行中的第一個單元格獲取值？

我試圖弄清楚如何從 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"   " "   "hljs-string">"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();
}

uj5u.com熱心網友回復：

您可以使用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>

uj5u.com熱心網友回復：

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>

標籤：javascript C＃

上一篇：顯示按物件陣列中的值分組的每個組的標題

下一篇：物件內的ReactJS陣列決議