这是一段table的代码。
我想实现选取checkbox就移动整行,上/下。
但是,我对节点不太熟悉,死活取不到tr标签或者td的内容。
哪位给提示一下?应该用到哪些属性?怎么取?
告诉我关键字就行了,谢谢啊~~~分不多~~
<table border="1" id="indItem" class="list_border_bg">
<col width="23px" />
<col width="190px" />
<col width="50px" />
<col width="100px" />
<col width="210px" />
<col width="105px" />

<tr>
<INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1001"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined">
<td class="list_data_bg_left" nowrap>
<INPUT name="indItemCheck" type="checkbox" value="1">
</td>
<td class="list_data_bg_left" nowrap title="bbbbb">
<div class="bpr_nowrap" style="width:191px;">
bbbbb
</div>
</td>
<td class="list_data_bg_left" nowrap>共有項目</td>
<td class="list_data_bg_left" nowrap>
<INPUT name="req_flg" type="radio" checked value="1">必須
<INPUT name="req_flg" type="radio" value="0">任意
</td>
<td class="list_data_bg_left" nowrap>
<INPUT readonly name="dflt_str_val" size="20" type="text" value="abcde">
</td>
<td class="list_data_bg" nowrap>
<table cellpadding="0" cellspacing="0" align="left" border="0">
<tr>
<td class="list_data_bg_left">
</td>
<td class="list_data_bg_right">
<a href="javascript:deleteIndItem()">削除</a>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1004"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined">
<td class="list_data_bg_left" nowrap>
<INPUT name="indItemCheck" type="checkbox" value="1">
</td>
<td class="list_data_bg_left" nowrap title="eeeee">
<div class="bpr_nowrap" style="width:191px;">
eeeee
</div>
</td>
<td class="list_data_bg_left" nowrap>
共有項目
</td>
<td class="list_data_bg_left" nowrap>
<INPUT name="req_flg" type="radio" checked value="1">必須
<INPUT name="req_flg" type="radio" value="0">任意
</td>
<td class="list_data_bg_left" nowrap>
<INPUT readonly name="dflt_str_val" size="20" type="text" value="DEF">
</td>
<td class="list_data_bg" nowrap>
<table cellpadding="0" cellspacing="0" align="left" border="0">
<tr>
<td class="list_data_bg_left">
</td>
<td class="list_data_bg_right">
<a href="javascript:deleteIndItem()">削除</a>
</td>
</tr>
</table>
</td>
</tr>
</table>

解决方案 »

  1.   

    先拿到所有checkboxdocument.getElementsByTagName('checkbox');然后循环绑定事件然后拿到当前点击的checkbox,用parentNode.parentNode像上找2个节点,就是tr了
      

  2.   

    额?能否再详细一点呢?例如,用到什么属性?感觉html的dom太复杂,不熟悉。
      

  3.   

    document.getElementsByTagName('checkbox').parentNode.parentNode
      

  4.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>  
        <script type="text/javascript">
            $(function () {
                $("#indItem :checkbox").click(function () { //设置表格中的每一个checkbox的点击事件
                    if ($(this).is(":checked")) {           //如果此checbox是选中状态
                        var $curTR = $(this).parent().parent(); //此checkbox当前所在行
                        if ($curTR.index() == 0) {              //如果是第一行, 则下移至表格最后一行
                            $curTR.appendTo($("#indItem"));
                        } else {                                //否则上移一行.
                            $curTR.after($curTR.prev());
                        }
                    }
                });
            })
        </script>
    </head>
    <body>
        <input type="button" value="Test" onclick="test()" />
        <table border="1" id="indItem" class="list_border_bg">
            <col width="23px" />
            <col width="190px" />
            <col width="50px" />
            <col width="100px" />
            <col width="210px" />
            <col width="105px" />
                                                    
            <tr>
                <INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1001"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined">
                <td class="list_data_bg_left" nowrap>
                    <INPUT name="indItemCheck" type="checkbox" value="1">
                </td>
                <td class="list_data_bg_left" nowrap title="bbbbb">
                    <div class="bpr_nowrap" style="width:191px;">
                        aaaaa
                    </div>
                </td>
                <td class="list_data_bg_left" nowrap>共有項目</td>
                <td class="list_data_bg_left" nowrap>
                        <INPUT name="req_flg" type="radio" checked value="1">必須
                        <INPUT name="req_flg" type="radio" value="0">任意
                </td>
                <td class="list_data_bg_left" nowrap>
                    <INPUT readonly name="dflt_str_val" size="20" type="text" value="abcde">
                </td>
                <td class="list_data_bg" nowrap>
                    <table cellpadding="0" cellspacing="0" align="left" border="0">
                        <tr>
                            <td class="list_data_bg_left">
                            </td>
                            <td class="list_data_bg_right">
                                <a href="javascript:deleteIndItem()">削除</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
                
            <tr>
                <INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1004"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined">
                <td class="list_data_bg_left" nowrap>
                    <INPUT name="indItemCheck" type="checkbox" value="1">
                </td>
                <td class="list_data_bg_left" nowrap title="eeeee">
                    <div class="bpr_nowrap" style="width:191px;">
                        bbbbb
                    </div>
                </td>
                <td class="list_data_bg_left" nowrap>
                        共有項目
                </td>
                <td class="list_data_bg_left" nowrap>
                        <INPUT name="req_flg" type="radio" checked value="1">必須
                        <INPUT name="req_flg" type="radio" value="0">任意
                </td>
                <td class="list_data_bg_left" nowrap>
                    <INPUT readonly name="dflt_str_val" size="20" type="text" value="DEF">
                </td>
                <td class="list_data_bg" nowrap>
                    <table cellpadding="0" cellspacing="0" align="left" border="0">
                        <tr>
                            <td class="list_data_bg_left">
                            </td>
                            <td class="list_data_bg_right">
                                <a href="javascript:deleteIndItem()">削除</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1004"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined">
                <td class="list_data_bg_left" nowrap>
                    <INPUT name="indItemCheck" type="checkbox" value="1">
                </td>
                <td class="list_data_bg_left" nowrap title="eeeee">
                    <div class="bpr_nowrap" style="width:191px;">
                        ccccc
                    </div>
                </td>
                <td class="list_data_bg_left" nowrap>
                        共有項目
                </td>
                <td class="list_data_bg_left" nowrap>
                        <INPUT name="req_flg" type="radio" checked value="1">必須
                        <INPUT name="req_flg" type="radio" value="0">任意
                </td>
                <td class="list_data_bg_left" nowrap>
                    <INPUT readonly name="dflt_str_val" size="20" type="text" value="DEF">
                </td>
                <td class="list_data_bg" nowrap>
                    <table cellpadding="0" cellspacing="0" align="left" border="0">
                        <tr>
                            <td class="list_data_bg_left">
                            </td>
                            <td class="list_data_bg_right">
                                <a href="javascript:deleteIndItem()">削除</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
    </html>
    试试吧