如何在javascript中动态获取html表数据值

Question

我的aspx.cs代码：

string studentid = dr["StudentId"].ToString();
        string studentname = dr["studentName"].ToString();
        Response.Write("<tr id = 'studentid' onclick = 'passValuesToInput(this)' >");
        Response.Write("<td id = 'sid' >");
        Response.Write(studentid);
        Response.Write("</td>");
        Response.Write("<td>");
        Response.Write(studentname);
        Response.Write("</td>");
        Response.Write("<td>");
        Response.Write("<img src = 'Edit-icon.png' height='20' width='20' >");
        Response.Write("</td>");
        Response.Write("<td>");
        Response.Write("<img src = 'ic_delete_48px-128.png' height='20' width='20'>");
        Response.Write("</td>");
        Response.Write("</tr>");
    }

JavaScript函数代码：

function passValuesToInput(x){
alert(x.innerHTML);
document.getElementById("tbId").value = document.getElementById("sid").innerHTML;
document.getElementById("tbId").readOnly = true;
}

无论哪一行是我点击的行，它只将第一行第一个元素传递给id = tbId的文本框。 帮我提出建议。 每当使用点击编辑或删除图像时，我想将行的第一个单元格传递到文本框。

Answer 1

document.getElementById（“sid”）将始终返回第一个单元格的innerHTML，因为id对于每个元素应该是唯一的，因此getElementById将选择具有该id的第一个元素。 如果您的sid始终是第一个单元格，那么您可以尝试下面的代码：

function passValuesToInput(x){
alert(x.innerHTML);
document.getElementById("tbId").value = x.cells[0].innerHTML;
document.getElementById("tbId").readOnly = true;
}

Answer 2

您应该尝试为该行传递唯一ID，否则它将始终选择第一个。 你可以尝试这样的事情：

string studentid = dr["StudentId"].ToString();
    string studentname = dr["studentName"].ToString();
    Response.Write(String.Format("<tr id = '{0}' onclick = 'passValuesToInput({0})' >",studentid ));
    Response.Write("<td id = 'sid' >");
    Response.Write(studentid);
    Response.Write("</td>");
    Response.Write("<td>");
    Response.Write(studentname);
    Response.Write("</td>");
    Response.Write("<td>");
    Response.Write("<img src = 'Edit-icon.png' height='20' width='20' >");
    Response.Write("</td>");
    Response.Write("<td>");
    Response.Write("<img src = 'ic_delete_48px-128.png' height='20' width='20'>");
    Response.Write("</td>");
    Response.Write("</tr>");
}

那么javascript可以写成：

function passValuesToInput(x){
 var elm = {};
 var elms = document.getElementById(x).getElementsByTagName("*");
 for (var i = 0; i < elms.length; i++) {
    if (elms[i].id === 'sid') {
        elm = elms[i];
        break;
    }
 }
 document.getElementById("tbId").value = elm.value; //or use elm.innerHtml
 document.getElementById("tbId").readOnly = true;    
}