html + js 实现点击某行连续高光三行（一组），并在右边显示该组的所包含的视频

想实现的效果：当点击第一行的时候，高光显示123三行（三行为一组，点击的行为第一行），并且把该组的所属视频展示在右侧的视频展示区。

效果图：

html部分：左侧的数据是动态获取的，然后展示信息。

代码：

<div class="cruiseRight">
        <div class="title">
            运营中机位
        </div>
        <div class="curiseContent">
            <div class="flightTable" id="flightTable">
                <table>
                    <thead>
                        <tr>
                            <td>序号</td>
                            <td>位号</td>
                            <td>号</td>
                            <td class="tabtd">状态</td>
                        </tr>
                    </thead>
                    <tbody class="scrollable-tbody" id="flightTbody">
                        <!-- <tr onclick="selectRows(this, 3)">
                            <td>1</td>
                            <td>121</td>
                            <td>65156</td>
                            <td>状态</td>
                        </tr> -->

                    </tbody>
                </table>
            </div>
            <div class="flightVideo">
                <div class="videoTop">视频</div>
                <div class="videoList" id="videoList">
                    <table>
                        <tr>
                            <!-- <td><div class="video auto-play"></div></td> -->
                            <td><div class="video">视频</div></td>
                            <td><div class="video">视频</div></td>
                        </tr>
                        <tr>
                            <td><div class="video">视频</div></td>
                            <td><div class="video">视频</div></td>
                        </tr>
                        <tr>
                            <td><div class="video">视频</div></td>
                            <td><div class="video">视频</div></td>
                        </tr>
                        <tr>
                            <td><div class="video">视频</div></td>
                            <td><div class="video">视频</div></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

css样式表（记一下而已没别的用处）：

body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    color: #fff;
    width: 861px;
    height: 497px;
}
.cruiseRight{
    background-image: url('../img/视频bg.png');
    width: 861px;
    height: 497px;
} 
.title{
    background-image: url('../img/标题bg.png');
    width: 270px;
    height: 55px;
    font-size: 24px;
    margin-top: 25px;
    margin-left: 25px;
    padding-left: 50px;
    padding-top: 5px;
}
.curiseContent{
    
    width: 810px;
    height: 386px;
    margin-left: 25px;
    display: flex;
    justify-content: space-around;
}
.flightTable{
    width: 398px;
    border: 2px solid rgba(19,146,183,.6);
    font-size: 14px;
    overflow-y: auto;
}
.flightTable::-webkit-scrollbar{
    width: 4px;
}
.flightTable::-webkit-scrollbar-thumb{
    background-color: #a1d1fd;
    border-radius: 2px;
}
.flightTable table {
    width: 100%;
    border-collapse: collapse;

}
.flightTable tr:nth-child(odd)  {
    background-color: #153e73;
    height: 38.3px;
 }

.flightTable tr:nth-child(even) {
    background-color: #0c294e;
    height: 38.3px;
 }
.flightTable thead tr{
    background-color:#404b5d !important;
}
.flightTable table, th, td {
    padding: 8px;
}
.flightTable table th, .flightTable table td {
    width: 25%; 
}
.flightTable  td:last-child {
    padding-left: 30px;
  }
.flightTable  th:first-child, .flightTable td:first-child {
padding-left: 20px;
}

.flightVideo{
    width: 398px;
    margin-left: 14px;
}
 .videoTop{
    background-image: url('../img/标题bg2.png');
    height: 26px;
    width: 355px;
    padding-left: 40px;
    padding-top: 3px;
    color:#d1ffa6;

}
.videoList{
    /* background-color: #a1d1fd; */
    width: 398px;
    height: 360px;
    overflow: auto;
    padding-top: 5px;
}
.videoList::-webkit-scrollbar{
    width: 4px;
}
.videoList::-webkit-scrollbar-thumb{
    background-color: #a1d1fd;
    border-radius: 2px;
}
.videoList th, td{
    width: 194px;
    margin: 0px;
    padding: 0px;
}

.video{
    width: 189px;
    height: 106px;
    margin: 8px 4px 1px 0px;
    background-color: #675769;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
video{
    width: 189px;
    height: 106px;
}
.selected{
    background-color: #1f4229 !important; /* 高亮：#1f4229 */
    color: #9ec983 !important;
}

js部分：

1、从后端获取数据动态创建表单显示数据：

$.ajax({
    type: 'POST',
    url: Url,
    data: data,
    success: function (response) {
        // alert("查询成功！");
        var data = response.data;
        standItems = data;
        console.log(standItems);
        const tableBody = document.querySelector('#flightTable tbody');
        tableBody.innerHTML = '';
        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                        <td>${item.no}</td>
                        <td>${item.std}</td>
                        <td>${item.flo}</td>
                        <td>${item.a_or_d}</td>
                `;
            // 绑定高光点击事件
            row.addEventListener('click', function (event) {
                selectRows(event, item);
            });
            tableBody.appendChild(row);
        });
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.error('请求失败：', textStatus, ' ', errorThrown);
    }
});

2、实现一组三行高光的功能(注意当数据总数不到两行和选择最后一行的情况)：

function selectRows(event, item) {
    const clickedRow = event.currentTarget; // 获取点击的行元素
    // console.log('点击的行：', clickedRow);
    console.log("111", item);
    const rows = document.querySelectorAll('#flightTbody tr');
    rows.forEach(row => {
        // console.log("2222222")
        row.classList.remove('selected');
    });

    const clickedRowIndex = Array.from(rows).indexOf(clickedRow);
    console.log("no:", clickedRowIndex);
    const camera_list = [];

    if (rows.length < 3) {
        standItems.forEach(item => {
            camera_list.push(...item.camera_list);
        });
        console.log("camera_list", camera_list);
        rows.forEach(row => {
            row.classList.add('selected');
        });
    } else {
        for (let i = clickedRowIndex; i < rows.length && i < clickedRowIndex + 3; i++) {
            camera_list.push(...standItems[i].camera_list);
        }
        console.log("camera_list", camera_list);
        for (let i = 0; i < 3; i++) {
            const rowToSelect = rows[clickedRowIndex + i];
            if (rowToSelect) {
                rowToSelect.classList.add('selected');
            
            }
        }
    };

    //  const camera_list = [
    //     "https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8",
    //     "https://sample-videos.com/video321/mp4/720/big buck bunny 720p 1mb.mp4",
    //     "http://www.w3school.com.cn/i/movie.mp4",
    //     "https://sample-videos.com/video321/mp4/480/big buck bunny 480p 1mb.mp4",
    //     "http://vjs.zencdn.net/v/oceans.mp4",
    //     "https://media.w3.org/2010/05/sintel/trailer.mp4"];
        
    displayVideo(camera_list);
}

3、将视频数组展示在右侧，一行二列，自动静音播放。

function displayVideo(camera_list) {
    var videoList = document.querySelector("#videoList table");
    videoList.innerHTML = '';
    var paris = Math.ceil(camera_list.length / 2 );
    console.log("paris:",paris);

    for (let i = 0 ; i < paris ; i++){
        const row = document.createElement('tr');
        const index1 = i * 2;
        if(index1 < camera_list.length){
            const cell1 = document.createElement('td');
            const videoContainer1 = document.createElement('div');
            videoContainer1.classList.add('video');
            videoContainer1.setAttribute('onclick',`onclickZoomInVideo('${camera_list[index1]}')`);

            const videoElement1 = document.createElement('video');
            videoElement1.src = camera_list[index1];
            videoElement1.autoplay = true; 
            videoElement1.muted = true;

            videoContainer1.appendChild(videoElement1);
            cell1.appendChild(videoContainer1);
            row.appendChild(cell1);
            console.log("videoElement1.src:",videoElement1.src);
            console.log("cell1:",cell1);
        }

        const index2 = i * 2 + 1;
        if(index1 < camera_list.length){
            const cell2 = document.createElement('td');
            const videoContainer2 = document.createElement('div');
            videoContainer2.classList.add('video');
            videoContainer2.setAttribute('onclick',`onclickZoomInVideo('${camera_list[index2]}')`);

            const videoElement2 = document.createElement('video');
            videoElement2.src = camera_list[index2];
            videoElement2.autoplay = true; 
            videoElement2.muted = true;

            videoContainer2.appendChild(videoElement2);
            cell2.appendChild(videoContainer2);
            row.appendChild(cell2);
            console.log("videoElement2.src:",videoElement2.src);
            console.log("cell2:",cell2);
        }

        videoList.appendChild(row);
        console.log("row:",row);
    }

}