Скопируйте строку таблицы html и добавьте в другую таблицу - PullRequest
Новая
       12

Скопируйте строку таблицы html и добавьте в другую таблицу

1 голос
/ 30 июня 2011

У меня есть две таблицы [Источник: таблица1, Назначение: таблица2] с 3 столбцами каждая (флажок, значение1, значение2). При установке флажка в таблице1 jquery должен скопировать эту конкретную строку и добавить ее в таблицу2, одновременно удаляя ее из таблицы1. Это действие также должно работать от table2 до table1. Я написал сценарий, но он не работает. Это копирование и удаление из таблицы1 и добавление в таблицу2, но когда я выбираю флажок в новой динамически добавляемой строке таблицы2, он каким-то образом не добавляется в таблицу1. 

    <script>
    $(document).ready(function() {
        $("#table1 tr input:checkbox").click(function() {
            $('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
            $(this).parent().parent().remove();
        });         

        $("#table2 tr input:checkbox").click(function() {
            $('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
            $(this).parent().parent().remove();
        }); 
    });
    </script>

Я что-то упустил? Как я могу исправить эту вещь?

Ответы [ 3 ]

4 голосов
/ 30 июня 2011

использовать живой клик 

<script>
$(document).ready(function() {
    $("#table1 tr input:checkbox").live('click',function() {
        $('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
        $(this).parent().parent().remove();
    });         

    $("#table2 tr input:checkbox").live('click',function() {
        $('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
        $(this).parent().parent().remove();
    }); 
});
</script>
3 голосов
/ 30 июня 2011

Сделайте это немного чище: 

<script>
    $(document).ready(function() {
        $("#table1 tr input:checkbox").click(function() {
            $('#table2').append($(this).parent('tr').clone());
            $(this).parent('tr').remove();
        });         

        $("#table2 tr input:checkbox").click(function() {
            $('#table1').append($(this).parent('tr').clone());
            $(this).parent('tr').remove();
        }); 
    });
    </script>

И проблема в том, что обработчики зарегистрированы в document.ready, что означает, что строки таблицы, заполненные первоначально, будут иметь зарегистрированных делегатов.Когда вы перемещаете строку в другую таблицу, слушателя больше нет, поэтому вы должны присоединить слушателя к самому флажку (через имя или идентификатор класса css)

Jquery bind также справится с задачей.

1 голос
/ 19 ноября 2011 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function(){

   $("#ti1").click(function(){
        $(".ul1").slideToggle(300);
        $(".ul2").hide();
        $(".ul3").hide();
        $(".ul4").hide();
   });

    $("#ti2").click(function(){
        $(".ul2").slideToggle(300);
        $(".ul1").hide();
        $(".ul3").hide();
        $(".ul4").hide();
   }); 
   $("#ti3").click(function(){
        $(".ul3").slideToggle(300);
        $(".ul1").hide();
        $(".ul2").hide();
        $(".ul4").hide();
   }); 
   $("#ti4").click(function(){
        $(".ul4").slideToggle(300);
        $(".ul1").hide();
        $(".ul3").hide();
        $(".ul2").hide();
   }); 

});


</script>
<style type="text/css">

.lidesign{
border:1px solid black;
width:10%;
background-color:#F5F5F5;
border:1px solid #EEEEE0;
}
.ul1{

    display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;
}
.ul2{

     display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;

}
.ul3{

    display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;



}
.ul4{

    display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;


}
#ti1{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
}
#ti2{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
position: relative;
}
#ti3{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
}
#ti4{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
}

</style>
</head>
<body>
<div id="menu">

    <div class="lidesign" id="ti1">Title1</div> 
        <div class="ul1">
        <ul>
            <li> 123</li>
            <li> 456</li>
            <li> 789</li>
            <li> 789</li>
            <li> 789</li>
            <li> 789</li>
            <li> 789</li>
        </ul>
        </div>
    <div class="lidesign" id="ti2">Title2</div> 
        <div class="ul2">
        <ul>
            <li> abc</li>
            <li> def</li>
            <li> ghi</li>
            <li> abc</li>
            <li> def</li>
            <li> ghi</li>
        </ul>
        </div>

    <div class="lidesign" id="ti3">Title3</div>
        <div class="ul3">
            <ul>
            <li> 123</li>
            <li> 456</li>
            <li> 789</li>
            <li> 123</li>
            <li> 456</li>
            <li> 789</li>
        </ul>
        </div>

    <div class="lidesign" id="ti4">Title4</div>
        <div class="ul4">
            <ul>
            <li> abc</li>
            <li> def</li>
            <li> ghi</li>
        </ul>
        </div>

</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...