Question

我正在创建动态数据并使用DOM对象显示在子表中。这是子表详细信息。

<table id="stdConTbl" width="135px" height="80px" class = "stdConTbl">

</table>

这是创建动态tr数据的代码。

var tbody = document.getElementById("stdConTbl").tBodies[0];
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var att = document.createAttribute("width");
    att.value = "1%";
    td.setAttributeNode(att);
    var td1 = document.createElement('td');
    td.innerHTML = '<input type = "radio" style = "BACKGROUND-COLOR: #e1e8ee" id = "' + tmpCount + '" name = "' + radioName + '" value = "' + txtValue + '" onclick = "setTblRowId()"/>';
    td1.innerHTML = '<label id = '+ tmpCount +"'>" +txtValue + '</label>';
    tr.appendChild(td);
    tr.appendChild(td1);
    //var radioHtml = tr.innerHTML;
    tbody.appendChild(tr);

使用这两个按钮，我订购了这些表数据。

<img src="<%=request.getContextPath()%>/images/procseq/up.png" style="cursor: hand;" class="up" />
<img src="<%=request.getContextPath()%>/images/procseq/down.png" style="cursor: hand;" class="down" />

当我选择这个动态创建的单选按钮并单击“向上”按钮时，所选的单选按钮标签应向上移动一步，然后再单击“向上”按钮，标签应再移动一步。

当我点击“DOWN”按钮时，我会遵循同样的事情。

但我无法获得子表行索引。

这是订购数据的代码。

$(document).ready(function(){
$(".up,.down").click(function(){
    var selectedIndex = 0;
    //var row = $(this).parents("tr:first"),$reindex_start;
    for(var i = 0; i < document.getElementsByName('stdConRadio').length; i++){
        if(document.getElementsByName('stdConRadio')[i].checked){
            selectedIndex = document.getElementsByName('stdConRadio')[i].getAttribute("id");
        }
    }
    var row = $(this).parents(".stdConTbl"),$reindex_start;
    //var row_index = $(this).closest('tr').index();        
    if ($(this).is(".up")) {            
        //row.insertBefore(selectedIndex - 1);
        row.insertBefore(row.prev());
        $reindex_start=row;
    } else {
        $reindex_start=row.next();          
        row.insertAfter(row.next());
    }
});

}）;

Answer 1

尝试此操作：找到所选单选按钮的tr，然后使用insertAfter或insertBefore移动tr。

$(document).ready(function(){
  $(".up,.down").click(function(){
    //get tr of selected radio button
    var $tr = $('#stdConTbl').find('input[name="stdConRadio"]:checked').closest("tr");
    //insert 
    if ($(this).is(".up")) {            
        $tr.insertBefore($tr.prev("tr"));
    } else {        
        $tr.insertAfter($tr.next("tr"));
    }
  });
});

使用JQuery排序子表数据

1 个答案: