Question

我试图按一下按钮来重置我表格中的某个值，但它无法正常工作。这是代码：

HTML

INSERTED

的jQuery

DELETED

JSFiddle

非常感谢任何帮助。

Answer 1

TD元素没有值，它有文本内容，所以你使用text()，你可以使用回调来返回数据属性

$(document).ready(function() {
    $("#reset").on("click", function() {
        $('#time').text(function() {
        	return $(this).data('default');
        })
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered" id="table">
    <thead>
        <tr>
            <th>Time</th>
            <th>Header</th>
            <th>Header</th>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="time" data-default="00:00">48:25</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

<button type="button" class="btn btn-block btn-danger" id="reset">Reset</button>

Answer 2

jsfiddle

问题是您使用val()。它不起作用，因为它仅用于表单值。

使用.text()代替

Answer 3

您错误地使用了val函数。 val用于添加/更改输入元素的值。

您要找的是改变innerHTML的{{1}}属性，该属性由td或html()完成。

html（） - 替换元素中的html。浏览器支持和呈现HTML标记

text（） - 替换元素中的文本。 HTML标记不受支持且不呈现

val（） - 用于在HTML

的输入标签中设置数据

data（） - 用于以text()的形式检索/设置任何html标记中的任意值，以后可以使用data-attribute_name

在这里阅读所有这些内容：

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

What is the difference between jQuery: text() and html() ?

Difference between val() and text()

https://api.jquery.com/data/

＆＃13;

element.data('attribute_name')

＆＃13;

$(document).ready(function() {
            $("#reset").on("click", function() {
              $('#table').find('#time').each(function(index, element) {
                $(this).html($(this).data('default'));
              });
            });
		});

＆＃13;

使用按钮重置表中的值

3 个答案: