JQuery/javascript選擇器和html表格操作

不知怎的，我只是得到這個工作。我有一張桌子，我可以在上面和下面用兩個按鈕交換行。這有效，但我必須從該操作中排除1列。這裏出了什麼問題？由於我現在有選擇器，所以沒有任何東西出現，不管是移動的行還是上下移動的行。什麼是塑造選擇最好的方式或有任何其他的方式來做到這一點。在這個時刻有這樣的代碼：JQuery/javascript選擇器和html表格操作

<!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>

來源

2014-06-25 Jan Veen

哪個單元不想移動？ – RobG

這是用id級標記的單元格。對不起，不提。 –

希望這會幫助你 http://jsfiddle.net/Amit12x/Uqn8h/ –

工作例如：http://jsfiddle.net/H72Ye/2/

我想我看到了什麼你正在試圖做的事：標題4列可能不會右移？

您正在使用.val()以class="id"的值獲取<td>的值。這不起作用。你的例子不起作用，因爲當你獲取它們時，parent_id和next_id是空的。

JQuery的文件說（http://api.jquery.com/val/）：

的.VAL（）方法主要用於獲得表單元素如輸入，選擇和textarea的值。

你想設置一個元素的HTML內容，http://api.jquery.com/html/：

在一個HTML文件，html的（）可用於獲取任何元素的內容。

您必須使用.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-條款修正了一些bug。更新的jsfiddle：http://jsfiddle.net/H72Ye/6/

來源

2014-06-25 10:06:53

對不起，更新了小提琴：[http://jsfiddle.net/H72Ye/4/](http://jsfiddle.net/H72Ye/4 /） –

點擊第一個向上按鈕。它會取代第三個單元格的值。不知道他是如何接受這個答案的。 –

我沒有重構整個代碼。我剛剛回答他的問題選擇器有什麼問題。但只是爲了這種情況：[http://jsfiddle.net/H72Ye/6/](http://jsfiddle.net/H72Ye/6/） –

Working Demo

.val()是用來獲取input元素的值的函數。您應該使用.text()代替。
獲得prev_id，檢查它是否有上一個元素。同爲next_id

$(document).ready(function() { 
    $('.up').on('click', function() { 
     var parent = $(this).parents(".row"); 
     var parent_id = $(this).parents(".row:first").find('.id').text(); 
     if (parent.prev().length) { 
      var prev_id = !parent.prev().length ? parent_id : parent.prev('.row:first').find('.id').text(); 
      parent.insertBefore(parent.prev(".row")); 
      parent.find('.id').text(prev_id); 
      parent.next().find('.id').text(parent_id); 
     } 
    }); 
    $('.down').on('click', function() { 
     var parent = $(this).parents(".row"); 
     var parent_id = $(this).parents(".row").find('.id').text(); 
     if (parent.next().length) { 
      var next_id = !parent.next().length ? parent_id : parent.next('.row').find('.id').text(); 
      parent.insertAfter(parent.next(".row")); 
      parent.find('.id').text(next_id); 
      parent.prev().find('.id').text(parent_id); 
     } 
    }); 
})

來源

2014-06-25 10:29:09

一切工作正常，但你會點擊第一個向上按鈕，然後正在取代第三個細胞。 –

明白了，在這個問題上工作。 –

@AmitKumar，更新了我的答案。 –

一個普通的JS解決方案，有幾個幫手。這非常簡單，如果你不必保持單元格到位。

function moveUp() { 
    var el = this; 
    var row0 = getAncestor(el, 'tr'); 
    var row1 = row0 && getPreviousElementSibling(row0); 

    // If no row or is top row, can't move up 
    if (!row0 || !row1) return; 

    // Swap rows 
    row0.parentNode.insertBefore(row0, row1); 

    // Put td back 
    var cell0 = row0.querySelector('.id'); 
    var cell1 = row1.querySelector('.id'); 

    if (cell0 && cell1) { 
    var t = cell0.cloneNode(false); 
    row0.replaceChild(t, cell0); 
    row1.replaceChild(cell0, cell1); 
    row0.replaceChild(cell1, t); 
    } 
}

moveDown幾乎是相同的，也許它應該是一個具有方向參數的函數。

function moveDown() { 
    var el = this; 
    var row0 = getAncestor(el, 'tr'); 
    var row1 = row0 && getNextElementSibling(row0); 

    // If no row or is bottom row, can't move down 
    if (!row0 || !row1) return; 

    var section = row0.parentNode; 

    // Swap rows 
    section.insertBefore(row1, row0); 

    // Put td back 
    var cell0 = row0.querySelector('.id'); 
    var cell1 = row1.querySelector('.id'); 

    if (cell0 && cell1) { 
    var t = cell0.cloneNode(false); // use clone as a placeholder 
    row0.replaceChild(t, cell0);  // put t where 0 is 
    row1.replaceChild(cell0, cell1); // put 0 where 1 is 
    row0.replaceChild(cell1, t);  // put 1 where t is and 0 was 
    } 
}

助手

// Get ancestor with tagName 
// Return element or undefined 
function getAncestor(el, tagName) { 
    tagName = tagName.toLowerCase(); 
    do { 
    el = el.parentNode; 
    if (el.tagName.toLowerCase() == tagName) { 
     return el; 
    } 
    } while (el.parentNode) 
} 

// Get previous element sibling, ignore #text nodes 
function getPreviousElementSibling(el) { 
    do { 
    el = el.previousSibling; 
    } while (el && el.nodeType != 1) 
    return el; 
} 

// Get next element sibling, ignore #text nodes 
function getNextElementSibling(el) { 
    do { 
    el = el.nextSibling; 
    } while (el && el.nodeType != 1) 
    return el; 
}

簡單的函數來增加聽衆

function addListeners() { 
    var ups = document.querySelectorAll('.up'); 
    for (var i=0, iLen=ups.length; i<iLen; i++) { 
    ups[i].onclick = moveUp; 
    } 
    var downs = document.querySelectorAll('.down'); 
    for (var j=0, jLen=ups.length; j<jLen; j++) { 
    downs[j].onclick = moveDown; 
    } 
} 

window.onload = addListeners;

來源

2014-06-25 10:46:19 RobG

其他解決方案相似，但少了幾分簡潔。由於您已經有prev_id/next_id的變量，因此您不需要檢查上一行/下一行的長度。如果沒有行，這些將是空的。

$('.up').on('click', function() { 
    var parent = $(this).parents('tr'); 
    var parent_id = parent.find('.id').text(); 
    var prev_id = parent.prev().find('.id').text(); 
    if (prev_id.length) { 
     parent.insertBefore(parent.prev()); 
     parent.find('.id').text(prev_id); 
     parent.next().find('.id').text(parent_id); 
    } 
}); 
$('.down').on('click', function() { 
    var parent = $(this).parents('tr'); 
    var parent_id = parent.find('.id').text(); 
    var next_id = parent.next().find('.id').text(); 
    if (next_id.length) { 
     parent.insertAfter(parent.next()); 
     parent.find('.id').text(next_id); 
     parent.prev().find('.id').text(parent_id); 
    } 
});

來源

2014-06-25 10:59:28 jme11

JQuery/javascript選擇器和html表格操作

回答

相關問題