[대진표 생성 프로그램] td요소의 class의 내용도 저장하는 코드로 만들고 싶다.

대진표의 td요소만 저장하면 문제가 있다.

누가 1라운드를 통과했는지. 2라운드 진출자는?

이런 내용을 class에 저장하는 것이 가장 합리적이란 생각이 든다.

그 클래스 내용을 저장하기 위한 나와의 싸움...

    // Get all the tables
    var tables = $("table[id^='matchlist']");
    var tableDataArray = [];
    var nameArray = [];
    var resultArray = [];
    
    tables.each(function(tableIndex, table) {
        // 데이터를 추출하여 변수에 저장하고 서버로 전송하기 위한 작업을 수행합니다.
        var tdElements = $(table).find('td');
        var tdTextArray = [];        

        for (var i = 0; i < tdElements.length; i++) 
            tdTextArray.push(tdElements[i].textContent);
		
        var dataToSend = tdTextArray.join(','); // 콤마로 구분하여 문자열로 만듭니다.
        tableDataArray.push(dataToSend);			

    });
   
   
    $("#T_table").val(tableDataArray.join(';'));  // 각 테이블의 데이터를 세미콜론으로 구분합니다.

현재 만들어놓은 프로그램의 코드는 위와 같다.

td요소의 클래스를 저장하는 방법은? 과연 가능할까?

 

textContent요소 td와 속성을 모두 저장하려면 class다음과 같은 방법으로 코드를 수정할 수 있습니다.
textContent를 밀어넣는 대신 tdTextArray텍스트와 클래스를 결합하는 객체나 문자열을 밀어넣을 수 있습니다.
배열을 결합하여 데이터 문자열을 형성할 때 새 구조를 고려하여 결합 메커니즘을 조정해야 합니다.
이러한 변경 사항을 구현하는 방법은 다음과 같습니다.

// Get all the tables
var tables = $("table[id^='matchlist']");
var tableDataArray = [];

tables.each(function(tableIndex, table) {
    // Extract data to store and send to the server
    var tdElements = $(table).find('td');
    var tdDataArray = [];        

    for (var i = 0; i < tdElements.length; i++) {
        var tdText = tdElements[i].textContent;
        var tdClass = tdElements[i].className; // Get class of the td element
        
        // Combine textContent and class name using a format of your choice
        // Here, I'm using a format "textContent|className"
        tdDataArray.push(tdText + "|" + tdClass);
    }

    var dataToSend = tdDataArray.join(','); // Separate data with commas
    tableDataArray.push(dataToSend);			
});

$("#T_table").val(tableDataArray.join(';'));  // Separate each table's data with a semicolon

 

위의 코드에서:
각 요소에 대해 "textContent|className" 형식으로 저장 td합니다 .
textContentclassName각 테이블의 데이터는 쉼표로 구분됩니다.
다른 테이블의 데이터는 세미콜론으로 구분됩니다.
참고: 이 구조는 td 텍스트 콘텐츠와 클래스 이름에 "|"가 포함되어 있지 않다고 가정합니다.
성격. 그렇다면 다른 구분 기호를 선택하거나 이 경우를 별도로 처리할 수 있습니다.

이를 화면에 불러오는 함수 제작

	  
function fillTDElementsWithData() {
    var data = $("#T_table").val();
    
    if (data !== null) {
        var tableDataArray = data.split(';');
        var tables = document.querySelectorAll("table[id^='matchlist']");
        
        tables.forEach(function(table, tableIndex) {
            var tableData = tableDataArray[tableIndex];
            if (tableData !== undefined && tableData !== '') {
                var cellDataArray = tableData.split(',');
                var tdElements = table.getElementsByTagName('td');
                
                Array.from(tdElements).forEach(function(td, i) {
                    var cellDataParts = cellDataArray[i].split('|');  // 수정된 부분
                    var cellText = cellDataParts[0];
                    var cellClass = cellDataParts[1];
                    
                    td.textContent = cellText;
                    td.className = cellClass;  // 클래스 추가
                    
                    var cellContent = cellText.trim();
                    
                    if (cellContent === 'x') {
                        td.style.backgroundColor = 'lightgray';
                        td.style.border = 'lightgray';
                    } else {
                        td.style.backgroundColor = '';
                        td.style.border = '3px solid blue';
                    }

                });
            }
        });
    } else {
       

        var tablesName = ["matchlistA", "matchlistB"];
        
        tablesName.forEach(function(tableId) {
            var table = document.getElementById(tableId);
            
            if (!table) {
                console.warn(`Table with id ${tableId} does not exist.`);
                return;
            }
            
            var trElements = table.getElementsByTagName('tr');
            
            trElements.forEach(function(tr, i) {
                var cells = tr.cells;
                
                if (tableId === "matchlistA" && cells.length > 1 && cells[0].textContent.trim() === 'x') {
                    if (i % 5 === 2 && trElements[i + 5] && trElements[i + 5].cells.length > 1) {
                        trElements[i + 5].cells[1].textContent = '(승)';
                    } else if (trElements[i - 5] && trElements[i - 5].cells.length > 1) {
                        trElements[i - 5].cells[1].textContent = '(승)';
                    }
                } else if (tableId === "matchlistB" && cells.length > 5 && cells[5].textContent.trim() === 'x') {
                    if (i % 5 === 2 && trElements[i + 5] && trElements[i + 5].cells.length > 4) {
                        trElements[i + 5].cells[4].textContent = '(승)';
                    } else if (trElements[i - 5] && trElements[i - 5].cells.length > 4) {
                        trElements[i - 5].cells[4].textContent = '(승)';
                    }
                }
            });
        });
    }
}

 

테이블의 (승)을 기록하기 위한 우리들의 처절한 노력~