HTML 表行"id"字段单击JavaScript获取值不起作用

Question

在我的html中我有：

 <div align="center">
        <div class="wrapper">
            <div class="table">
                <div class="row header">
                    <div class="cell">Select No</div>
                    <div class="cell">Id</div>
                    <div class="cell">Name</div>

                </div>
                <c:forEach var="student" items="${studentList}" varStatus="status">
                    <div class="row">
                        <div class="cell">${status.index + 1}</div>
                        <%-- <div class="cell">${student.u_id}</div> --%>
                        <div class="cell">
                            <a href="edit?id=${student.u_id}" onclick="return getData(this);">${student.u_id}</a>
                        </div>
                        <div class="cell">${student.name}</div>

                    </div>
                </c:forEach>
            </div>
        </div>
    </div>

我的JavaScript代码是：

function getData(element) {
        var ID = $(element).attr("u_id");
        var inputs=document.getElementsByTagName('input');
        var tds=o.getElementsByTagName('td');
        for(a in tds){
            inputs[a].value=tds[a].innerHTML;
        }

        console.log(ID);
        return false;
    }

我的要求：

在这里，我将学生列表数据显示到HTML表中。我想要单击 ID 字段后，它将调用JavaScript并在控制台中获取ID的值。但是我在控制台中获得了 undefiend 值。我做错了什么？

Answer 1

ID选择器应该是唯一的，但是在您的情况下，您将相同的 ID分配给了一个循环中的多个元素，这是错误的。改用Class选择器。

Answer 2

尝试一下。var inputs = document.getElementsbytagname('input'(。值;

Answer 3

在您的

中

<a href="edit?id=${student.u_id}" onclick="return getData(this);">${student.u_id}</a>

您没有u_id属性，而是将其更改为

<a href="edit?id=${student.u_id}" onclick="return getData(this);" u_id="{student.u_id}">${student.u_id}</a>

Answer 4

您的HTML代码中没有u_id属性，仅在您在EL Expression ${....u_id}中使用的值中。

这些属性将被HTML中的实际值替换(预期(，因此，如果您需要通过JavaScript检索它们，则必须将它们分配给另一个HTML属性，或在onclick Invocation中传递它们。<<<<<<<<<<<<<<<<<<<<<<<<

使用当前的HTML代码，您可以从<a>标签的 content 中读取值，但是添加属性将是一种更干净的方法。