Как получить конкретные данные ячейки таблицы на основе данных другой таблицы - PullRequest
0 голосов
/ 06 июля 2011

У меня jsFiddle, настроенный , над которым я работал, чтобы решить мою проблему.

$('.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>

Мне нужно иметь возможность собрать массив элементов, которые проверяются в таблице, но только если проверенных элементов еще нетсвязано с тем, что выбрано в раскрывающемся списке.Не уверен, имеет ли это какой-то смысл для вас, но вы должны понимать, что я имею в виду, когда смотрите на скрипку.

В конечном счете, при нажатии кнопки в последнем предупреждении в функции должен отображаться только атрибут значения.классов, которые еще не перечислены в docTable для документа, выбранного в раскрывающемся списке.

1 Ответ

0 голосов
/ 30 октября 2015

ОП написал в редакции:

Спасибо, что хотя бы проверили это, Леви.Извините, я не ясно объяснил, что должно было случиться.

Однако, наконец, я заставил его работать так, как хотелось. Вот новый рабочий 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 является рабочим примером..

...