Question

情境：

我有一个带复选框的结果表，当选中该复选框时，该行的内容（实际上只有2列连接，被复制到一个新的div，带有作业代码和作业名称）。这很好用，我已经避免了重复。但是，在新的结果div中，我正在创建一个锚标记来删除div本身。删除div后，我应该能够使用复选框再次添加所选作业。请注意，结果表中有许多作业，因此将标志设置为false将不起作用。

此外，如果您找到更好的标题，请告诉我

    //On every checkbow that is clicked
    var flag = false;
    $("#ctl00_PlaceHolderMain_myGrid input").change(function () {
        if (this.checked && flag === false) {
            flag = true;
            var jobCode = $(this).parent().parent().parent().find("td:eq(2)").text()
            var jobName = $(this).parent().parent().parent().find("td:eq(1)").text()
            var displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase();                      
            AddSelectedJob(jobCode, displayvalue);
            //$(this).unbind('change'); //Unbind the change event so that it doesnt fire again
            FillSelectedJobs();            
        }
    });



//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="javascript:;" onclick="removeSelectedJob(this)">Remove selected job</a></div>');
}

//Removes the selected job from the resutls div
function removeSelectedJob(el) {
    $(el).parent().remove();
}

生成的html是这样的：

<div>
            <div style="height: 300px; overflow: auto; float: left">
                <div>
        <table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" style="color:#333333;width:100%;border-collapse:collapse;">
            <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
                <th scope="col">&nbsp;</th><th scope="col">JobCode</th><th scope="col">JobName</th><th scope="col">JobPartner</th><th scope="col">JobManager</th><th scope="col">ClientName</th>
            </tr><tr style="color:#333333;background-color:#F7F6F3;">
                <td>
                                <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" />
                            </td><td>jobcode01</td><td>jobname</td><td>xx</td><td>xx</td><td>xx</td>
            </tr>
        </table>
    </div>
            </div>
            <div style="margin-top: 0px; margin-left: 10px; float: left">
                <span>Selected :</span>
                <div id="ResultsDiv" style="margin-top: 0px">
                </div>
            </div>

Answer 1

首先，我建议对您的HTML进行一些更改。从DOM中分离出样式并将它们放在类中。

这确保了关注点分离

<强> HTML

<div>
    <div class="divMain">
        <div>
            <table cellspacing="0" cellpadding="4" 
                     id="ctl00_PlaceHolderMain_myGrid" class="table">
                <tr class="rowHead">
                    <th scope="col">&nbsp;</th>
                    <th scope="col">JobCode</th>
                    <th scope="col">JobName</th>
                    <th scope="col">JobPartner</th>
                    <th scope="col">JobManager</th>
                    <th scope="col">ClientName</th>
                </tr>
                <tr class="row">
                    <td>
                        <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" 
                           type="checkbox" 
                          name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1"
                          data-flag="false" />
                    </td>
                    <td>column1</td>
                    <td>column2</td>
                    <td>column3</td>
                    <td>column4</td>
                    <td>column5</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="m0 selected"> 
        <span>Selected :</span>
        <div id="ResultsDiv" class="m0"></div>
    </div>

<强> CSS

.divMain{
    height: 300px;
    overflow: auto;
    float: left
}

.table{
    color:#333333;
    width:100%;
    border-collapse:collapse;
}

.rowHead{    
    color:White;
    background-color:#5D7B9D;
    font-weight:bold;
}

.row{
 color:#333333;
 background-color:#F7F6F3;   
}

.m0{
     margin-top: 0px;   
}

.selected{
    margin-left: 10px;
    float: left
}

<强>的Javascript

$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
    // Next cache your selector
    // so that you need not crawl the DOM multiple times
    var $this = $(this),
        $row = $this.closest('.row'),
        currFlag = Boolean($this.data('flag'));

    // As there might be multiple jobs , a single flag variable  
    // will not work. So you can set a data-flag attribute on the 
    // input that stores the current value
    if (currFlag === false && this.checked) {
        // Set the corresponding flag to true
        $this.data('flag', true);
        var jobCode = $row.find("td:eq(2)").text(),
            jobName = $row.find("td:eq(1)").text(),
            displayvalue = jobCode.toUpperCase() + " - " 
                         + jobName.toUpperCase(),
            inputId =  $this.attr('id')
        // Pass the input name too as you need to set the value of
        // the corresponding flag value again as you can add it multiple times         
        AddSelectedJob(jobCode, displayvalue, inputId);
        FillSelectedJobs();
    }
});

//Add selected job in the results div
function AddSelectedJob(id, display, inputId) {
    //create a div for every selected job
    // Use the inputId to save it as a data-id attribute  
    // on anchor so that you can set the value of the flag after 
    // removing it
    var html = '<div class="selectedjobs" id=' + id + '>' + display ;
    html += '<a href="javascript" data-id="'+ inputId 
                                 +'">Remove selected job</a></div>';                   
    $('[id$=ResultsDiv]').append(html);
}

// Remove the inline click event for the anchor and delgate it to the 
// static parent container
$('[id$=ResultsDiv]').on('click', 'a', function(e) {
    var $this = $(this),
        $currentCheckbox = $this.data('id');
    // Set the flag value of the input back to false

    $('#'+ $currentCheckbox).data('flag', false);
    e.preventDefault(); // prevent the default action of the anchor
    $this.closest('.selectedjobs').remove();
});


function FillSelectedJobs() {
    //save values into the hidden field
    var selectedJobs = $("[id$=ResultsDiv]").find("[class$='selectedjobs']");
    var returnvalue = "";
    for (var i = 0; i < selectedJobs.length; i++)
        returnvalue += selectedJobs[i].id + ";";
    $("[id$=HiddenClientCode]").val(returnvalue);
}

<强> Check Fiddle

根据某些业务逻辑动态添加和删除复选框事件？

1 个答案: