gpt4 book ai didi

javascript - JQuery/javascript 选择器和 html 表操作

转载 作者:搜寻专家 更新时间:2023-10-31 22:44:18 24 4
gpt4 key购买 nike

不知何故,我只是无法让它正常工作。我有一个表,我在其中用两个向上和向下按钮交换行。这可行,但我必须从该操作中排除 1 列。这里出了什么问题?因为我现在有选择器,所以没有任何结果,无论是移动的行还是放置的行,无论是向上还是向下。塑造选择器的最佳方式是什么,或者是否有任何其他方式可以做到这一点?目前有这样的代码:

<!DOCTYPE html>

<html>
<head>
<title>energiesale test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/jquery-1.11.1.min.js"></script>

</head>
<body>

<table>
<thead><tr>
<th>header1</th><th>header2</th><th>header3</th><th>header 4</th> </tr></thead>
<tbody><tr class='row'><td>rij 1</td><td>cell 1</td><td class='id'>1</td><td><button value='up' class="up">Up</button> <button value='down' class="down">Down</button></td></tr>
<tr class='row'><td>rij 2</td><td>cell 2</td><td class='id'>2</td><td><button value='up' class="up">Up</button> <button value='down' class="down">Down</button></td></tr>
<tr class='row'><td>rij 3</td><td>cell 3</td><td class='id'>3</td><td><button value='up' class="up">Up</button> <button value='down' class='down'>Down</button></td></tr>
<tr class='row'><td>rij 4</td><td>cell 4</td><td class='id'>4</td><td><button value='up' class="up">Up</button> <button value='down' class='down'>Down</button></td></tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('.up').on('click',function() {
var parent = $(this).parents(".row");
var parent_id = $(this).parents(".row:first").find('.id').val();
var prev_id = parent.prev('.row:first').find('.id').val();
parent.insertBefore(parent.prev(".row"));
$(this).parents(".row").find('.id').val(prev_id);
parent.prev('.row:first').find('.id').val(parent_id);
});
$('.down').on('click',function(){
var parent = $(this).parents(".row");
var parent_id = $(this).parents(".row").find('.id').val();
var next_id = parent.next('.row').find('.id').val();
parent.insertAfter(parent.next(".row"));
$(this).parents('.row').find('.id').val(next_id);
parent.prev('.row').find('.id').val(parent_id);
})
;
})


</script>
</body>
</html>

最佳答案

工作示例:http://jsfiddle.net/H72Ye/2/

我想我明白您要做什么:标题 4 列可能不会向右移动?

您正在使用 .val()获取 <td> 的值与 class="id" .这是行不通的。您的示例不起作用,因为 parent_idnext_id获取它们时是空的。

JQuery 文档说(http://api.jquery.com/val/):

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

您想设置元素的 HTML 内容,http://api.jquery.com/html/ :

In an HTML document, .html() can be used to get the contents of any element.

您必须使用 .html()相反:

var parent_id =  $(this).parents(".row").find('.id').html();
var next_id = parent.next('.row').find('.id').html();

PS:你的“UP”功能还是有问题。你需要它来正确调试。

我已经解决了这个问题。我在 $('.up').on('click',function() {}) 中更改了以下内容:

parent.prev('.row:first').find('.id').html(parent_id);

parent.next('.row:first').find('.id').html(parent_id);

编辑:我还添加了一些额外的 IF 子句来修复一些错误。更新的 JSFiddle:http://jsfiddle.net/H72Ye/6/

关于javascript - JQuery/javascript 选择器和 html 表操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24405173/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com