如何根据另一个表的数据获取特定的表单元格数据

Question

我有 a jsFiddle set up，我一直在努力解决我的问题。

$('.docAdminFormSubmit').click(function() {
    buttonClicked = $(this).attr('name');

    if (buttonClicked == 'submitAddClassesToDoc') {
        AddClassesToDoc();
        return false;
    }
});

function AddClassesToDoc() {
    // Check if doc selected in dropdown
    var selectedDocID = '';
    if ($('select#docsList option:selected').val() == 0) {
        alert('No document selected');
        // No doc selected
        return false;
    } else {
        selectedDocID = $('select option:selected').val();
        //alert('selected Doc ID: ' + selectedDocID);
    }

    alert('Selected doc ID: ' + selectedDocID);

    // Check if any classes selected and add them to the array
    var classesToAddToDoc;
    if ($('input.chkAddClass:checked').length) {
        // At least one class checked
        // Get the id(s) of the checked class(es) that aren't already assigned to the selected document
        classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function() {
            var currentClassNumber = $(this).parent('td').next().text();

            alert('Current classID: ' + $(this).val() + ', currentClassNumber: ' + currentClassNumber );
            
            var found = false;

            $('#docsTable a[name="' + selectedDocID + '"]').parent().parent().parent().find('tr.docClassesRow').each(function() {
                alert('Doc\'s current class number: ' + $(this).find('td').last().html());

                if ($(this).find('td').last().html() == currentClassNumber ) {
                    alert('Class number ' + currentClassNumber + ' already assigned');
                    found = true;
                }
            })
            
                if (!found) {
                    alert('Adding ' + $(this).val() + ' to array');
                    return $(this).val();
                }

        }).get();
    } else {
        // No classes checked
        alert('No classes checked');

        return false;
    }

    alert('classesToAddToDoc: ' + classesToAddToDoc);
}

body {
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px; }

a.edit:link { color: #000000; }
a.edit:visited { color: #000000; }
a.edit:hover { color: #A04A56; }
a.edit:active { color: #A04A56; }

table { border-collapse: collapse; }

.tableHeader {
    background-color: #A04A56;
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold; }

.edit { font-weight: bold; }

.classRow,
.docRow {
    background-color: #EFE5D3;
    font-size: 1.1em; }

.docAndClassTitle {
    font-weight: bold;
}

.noClasses,
.noDocs { font-style: italic; }

<table id="docsTable" cellpadding="3">
    <thead>
        <tr class="tableHeader">
            <td colspan="2"></td>
            <td width="245px">Document Name</td>
            <td width="410px">Document Description</td>
            <td width="200px">File Name</td>
        </tr>
    </thead>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="55" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="55" /></td>
            <td class="docAndClassTitle">Document 1</td>
            <td>Doc 1 Description</td>
            <td>doc1.pdf</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-55" /></td>
            <td colspan="3">CLASS1111</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-55" /></td>
            <td colspan="3">CLASS3333</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="62" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="62" /></td>
            <td class="docAndClassTitle">Document 2</td>
            <td>Doc 2 Description</td>
            <td>doc2.docx</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-62" /></td>
            <td colspan="3">CLASS1111</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="35" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="35" /></td>
            <td class="docAndClassTitle">Document 3</td>
            <td>Doc 3 Description</td>
            <td>doc3.docx</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-35" /></td>
            <td colspan="3">CLASS3333</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow">
            <td width="25px"><a class="docAdminFormSubmit edit" name="61" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="61" /></td>
            <td class="docAndClassTitle">Document 4</td>
            <td>Doc 4 Description</td>
            <td>doc4.xls</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-61" /></td>
            <td colspan="3">CLASS1111</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-61" /></td>
            <td colspan="3">CLASS3333</td>
        </tr>
    </tbody>
</table>

<br />
<br />

<strong>Select a document for the classes:</strong>
<select type="select" id="docsList" name="docsList">
    <option id="defaultDocsListItem" value="0">Select a Document...</option>
    <option value="55">Document 1</option>
    <option value="62">Document 2</option>
    <option value="35">Document 3</option>
    <option value="61">Document 4</option>            
</select>
<input type="submit" id="submitAddClassesToDoc" name="submitAddClassesToDoc" class="docAdminFormSubmit" value="Add Checked Classes to Selected Document" />

<br />
<br />
<br />

<table id="classesTable" cellpadding="3">
    <thead>
        <tr class="tableHeader">
            <td width="30px"></td>
            <td width="100px">Class<br />Number</td>
            <td width="600px">Class Name</td>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="">
            <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="33" /></td>
            <td>CLASS1111</td>
            <td>Class 1 Name</td>
        </tr>
        <tr bgcolor="#EFE5D3">
            <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="153" /></td>
            <td>CLASS2222</td>
            <td>Class 2 Name</td>
        </tr>
        <tr bgcolor="">
            <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
            <td>CLASS3333</td>
            <td>Class 3 Name</td>
        </tr>
    </tbody>
</table>

我需要能够将在表格中选中的一组项目放在一起，但前提是选中的项目尚未与下拉列表中选择的内容相关联。不确定这对您是否有意义，但是当您查看 Fiddle 时，您应该明白我的意思。

最终，当单击按钮时，函数中的最终警报应该只显示在下拉列表中选择的文档的 docTable 中尚未列出的类的 value 属性。

Answer 1

OP 在编辑中写道：

感谢您至少检查一下，Levi。抱歉，我没有解释清楚应该发生什么。

但是，我终于让它按要求工作了。 Here is a new working jsFiddle。 （我把原来的搞砸了，最后删除了。）

$(function () {
    // create the chart
    $('#container').highcharts({
        chart: {
            events: {
                addSeries: function() {
                    alert ('A series was added, about to redraw chart');
                }
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });


    // activate the button
    $('#button').click(function() {
        var chart = $('#container').highcharts();

        chart.addSeries({
            data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
        });

        $(this).attr('disabled', true);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">Add series</button>

这是应该发生的事情： 用户从下拉列表中选择一个项目，然后选中下表中的框以指示他希望将表中的哪些项目添加到文档中。最上面的表格显示了当前分配给每个文档的类。

Fiddle 的目的是将底部表格中的类 ID 数组放在一起，以添加到选定的文档中，但如果用户检查了底部表格中的项目，并且它已经为选定的文档列出在顶部表格中，该类 ID 不应添加到数组中。

正如我所说，上面链接的 Fiddle 是一个工作示例。