需要使用javascript/jQuery为多个div和网格编写通用代码

我有一个4行4列的表格，在每行的最后一个单元格中，我有一个文本框和一个按钮，点击按钮，一个带有复选框和项目的网格就会显示出来。如果选中了相关复选框，则项目的标签/名称应显示在行的文本框内。我已按要求硬编码。但我将从xml文件中获取网格数据。 假设主表中有100到1000行，我需要为每行的网格数据使用通用javascript或jquery代码。（注意：网格数据对于每一行都不相同，而是从xml文件中获取，因此我必须在每一行xml数据中附加复选框）

我写的代码可以在中找到

对于主表的行，依此类推

---

提前感谢。

我们的想法是为每行使用具有不同值的

数据id

属性，并基于

数据id

值生成一个通用jquery脚本

第一步是将表行更改为如下所示

<tr align="center">
    ...
    ...
    <td>
        <input type="text" name="text1" class="inputField datainsert" data-id="1" size="30" />
        <div style="float:right;" id="c1" class="imgWrapper" data-id="1">
            <img src="images/ball_green.gif" id="b1" />
        </div>
    </td>
</tr>
<tr align="center">
    ...
    ...
    <td>
        <input type="text" name="text2" class="inputField datainsert" data-id="2" size="30" />
        <div style="float:right" id="c2" class="imgWrapper" data-id="2">
            <img src="images/ball_green.gif" id="b2" />
        </div>
    </td>
</tr>

最后一步是更改jquery脚本，请参见下面的代码

$(document).ready(function () {
    $('.imgWrapper').on('click', function (e) {
        e.preventDefault();
        $('.cp[data-id=' + $(this).data('id') + ']').css('position', 'absolute');
        $('.cp[data-id=' + $(this).data('id') + ']').css('top', e.pageY - 2);
        $('.cp[data-id=' + $(this).data('id') + ']').css('left', e.pageX + 24);
        $('.cp[data-id=' + $(this).data('id') + ']').toggle("slide");
        $('.cp[data-id=' + $(this).data('id') + ']  img').attr('src', 'images/ball_red.gif');
        $('.cp[data-id!=' + $(this).data('id') + ']').hide();
        $('.cp[data-id!=' + $(this).data('id') + ']  img').attr('src', 'images/ball_green.gif');
    });
});
$(".checkbox").on("change", function () {
    var companies = [];
    $('.cp[data-id=' + $(this).closest('.cp').data('id') + '] .checkbox:checked').each(function () {
        var companiesTypes = $(this).next().text();
        companies.push(companiesTypes);
    });
    $(".datainsert[data-id=" + $(this).closest('.cp').data('id') + "]").val(companies.join(", "));
});

所有行的

.imgWrapper

div的单击事件将在

$（'.imgWrapper'）中处理。在（'click'

）上，它根据单击的

.imgWrapper

div的

数据id

值，使用和选择正确的

.cp

div

所有复选框的单击事件将在（“.checkbox”）.on（“change”）中处理，它将所选复选框的文本插入到与所单击复选框的父项

.cp

div相同的

.datainsert

文本框中，该文本框具有与所单击复选框的父项

.cp

div相同的

数据id

值

---

工作演示：

非常感谢您的帮助。

<div class="cp" data-id="1" style="display:none; border:1px #000; border-style:solid; width:300px; float:left;">
    <table class="checkboxlist_list">
        <tr>
            <td>
                <input type="checkbox" class="checkbox ABC" name="keys" id="ABC" value="150" />
                <label for="ABC">ABC company</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox Dufry" name="DEF" id="DEF" value="150" />
                <label for="DEF">DEF COMPANY</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox ADF" name="ADF" id="ADF" value="150" />
                <label for="ADF">ADF COMPANY</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox DBA" name="DBA" id="DBA" value="150" />
                <label for="DBA">DBA COMPANY</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox DPDBA" name="DPDBA" id="DPDBA" value="150" />
                <label for="DPDBA">DPDBA COMPNAY</label>
            </td>
        </tr>
        <tr>
    </table>
</div>
<div class="cp" data-id="2" id="companyList2" style="display:none; border:1px #000; border-style:solid; width:300px; float:left;">
    <table class="checkboxlist_list">
        <tr>
            <td>
                <input type="checkbox" class="checkbox CAM" name="CAM" id="CAM" value="150" />
                <label for="CAM">CAM COMPANY</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox CAN" name="CAN" id="CAN" value="150" />
                <label for="CAN">CAM COMPANY</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox CEI2" name="CEI2" id="CEI2" value="150" />
                <label for="CEI2">CEI - Flagship</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox CEI3" name="CEI3" id="CEI3" value="150" />
                <label for="CEI3">CEI COMPANY</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox CEI5" name="CEI5" id="CEI5" value="150" />
                <label for="CEI5">CEI - Grand LTD</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checkbox CEI7" name="CEI7" id="CEI7" value="150" />
                <label for="CEI7">CEI - Honda</label>
            </td>
        </tr>
    </table>
</div>

$(document).ready(function () {
    $('.imgWrapper').on('click', function (e) {
        e.preventDefault();
        $('.cp[data-id=' + $(this).data('id') + ']').css('position', 'absolute');
        $('.cp[data-id=' + $(this).data('id') + ']').css('top', e.pageY - 2);
        $('.cp[data-id=' + $(this).data('id') + ']').css('left', e.pageX + 24);
        $('.cp[data-id=' + $(this).data('id') + ']').toggle("slide");
        $('.cp[data-id=' + $(this).data('id') + ']  img').attr('src', 'images/ball_red.gif');
        $('.cp[data-id!=' + $(this).data('id') + ']').hide();
        $('.cp[data-id!=' + $(this).data('id') + ']  img').attr('src', 'images/ball_green.gif');
    });
});
$(".checkbox").on("change", function () {
    var companies = [];
    $('.cp[data-id=' + $(this).closest('.cp').data('id') + '] .checkbox:checked').each(function () {
        var companiesTypes = $(this).next().text();
        companies.push(companiesTypes);
    });
    $(".datainsert[data-id=" + $(this).closest('.cp').data('id') + "]").val(companies.join(", "));
});