Question

首先，我是一个JavaScript菜鸟，但我不了解这种基础知识。

因此，对于我的实习，我必须编写一个质量控制程序，为此，我需要一个图像传送带和一个放在其上的表格，该表格的作用就像带按钮的坐标系。（如果选择了一个，它应该变成红色）。每个图像应具有其自己的表。另外，表格不应超出图像。

直到现在，我已经设法创建了图像轮播和表格，但没有将二者结合起来。

CSS

 table, th, td {
            font: 17px Calibri;
            border: solid 1px black;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }

            td:nth-child(1) {
                text-align: right
            }

这是轮播：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Result</title>

</head>
<body>
 <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="~/images/banner1.svg" alt="ASP.NET" class="img-responsive" />
                <div class="carousel-caption" role="option">
                </div>
            </div>
            <div class="item">
                <img src="~/images/banner2.svg" alt="Visual Studio" class="img-responsive" />
                <div class="carousel-caption" role="option">
                </div>
            </div>
            <div class="item">
                <img src="~/images/banner3.svg" alt="Microsoft Azure" class="img-responsive" />
                <div class="carousel-caption" role="option">
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

很抱歉，如果没有这些图像，我无法添加它们。

表格：

HTML

    <div id="Table"></div>

javascript

<script>
        function addTable() {
var abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ'];

var myTableDiv = document.getElementById("Table");
            var table = document.createElement('TABLE');
            table.border = '1';
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            var Y_Length = 53;
            var X_Length = 101;

            for (var i = 0; i < Y_Length ; i++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);
                var td = document.createElement("td")
                td.innerHTML = (i > 0) ? i : "&nbsp;"
                tr.appendChild(td)

                for (var j = 0; j < X_Length; j++) {
                    var td = document.createElement('TD');
                    td.width = '75';

                    if (i == 0) {
                        td.appendChild(document.createTextNode(abc[j]));

                    } else {
                        var button = document.createElement("button");
                        button.innerHTML = "";
                        button.addEventListener("click", myFunction);
                        td.appendChild(button);
                    }

                    tr.appendChild(td);
                }
            }



            myTableDiv.appendChild(table);

        }
        addTable();
</script>

对于此结果，它应如下所示：

有“原始”表：

在此先感谢您的良好回答！

Answer 1

我将从头开始重新创建它，以轻松地带您完成它。

首先，让我们创建表。

// Array of image sources
var images = [
  'a.png',
  'b.png',
  'c.png'
];

// How many rows we want, excluding the top header
var rowCount = 10;
// How many columns we want, excluding the left header
var columnCount = 10;

// Wait for DOM Content to load
document.addEventListener('DOMContentLoaded', function() {
  // Get the carousel div
  var carousel = document.getElementById('carousel');

  // Iterate over every images
  for (var i = 0; i < images.length; i++) {
    // Create a new table for the image
    var table = document.createElement('table');
    // Append the table to the carousel
    carousel.appendChild(table);

    // Create a new table head for the table
    var tableHead = document.createElement('thead');
    // Append the table body to the table
    table.appendChild(tableHead);

    // Create a dedicated table row for the header 
    var tableHeadRow = document.createElement('tr');
    // Append the table row to the table head
    tableHead.appendChild(tableHeadRow);

    // Create a dedicated table header for the left column
    var tableHeadHeader = document.createElement('th');
    // Add a space to the table data cell
    tableHeadHeader.innerHTML = '&nbsp;';
    tableHeadHeader.scope = 'col';
    // Append the table data cell to the tablerow
    tableHeadRow.appendChild(tableHeadHeader);

    for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
      // Create a new table header
      var tableHeader = document.createElement('th');
      // Add the index to the table data cell
      tableHeader.innerHTML = rowIndex;
      tableHeader.scope = 'col';
      // Append the table data cell to the tablerow
      tableHeadRow.appendChild(tableHeader);
    }

    // Create a new table body for the table
    var tableBody = document.createElement('tbody');
    // Append the table body to the table
    table.appendChild(tableBody);

    for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
      // Create a new table data cell
      var tableRow = document.createElement('tr');
      // Append the table data cell to the row
      tableBody.appendChild(tableRow);

      // Create a new table header
      var tableRowHeader = document.createElement('th');
      // Add the index to the table data cell
      tableRowHeader.innerHTML = columnIndex;
      tableRowHeader.scope = 'row';
      // Append the table data cell to the tablerow
      tableRow.appendChild(tableRowHeader);

      for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
        // Create a new table data cell
        var tableDataCell = document.createElement('td');
        // Add a click event listener to the table data cell
        tableDataCell.addEventListener('click', function(event) {
          // Add 'selected' class to the table data cell
          // WARNING: Do not use the tableDataCell variable, because it will equal to the last cell
          event.target.classList.add('selected');
        });
        // Append the table data cell to the tablerow
        tableRow.appendChild(tableDataCell);
      }
    }
  }
});

#carousel table,
#carousel table tbody tr,
#carousel table tbody tr td,
#carousel table thead tr th {
  border: 1px solid black;
  border-collapse: collapse;
}

#carousel table tbody tr td.selected {
  border: 4px solid red;
}

<div id="carousel">

</div>

现在，有几种不同的方法可以使图像显示在桌子后面，我建议尽可能多地使用CSS。

我还没有测试过任何一个，但是从理论上讲它们应该可以工作。

背景图片：

#carousel table tbody {
  background: url('path/to/your/image')
}

相对/绝对职位：

#carousel {
  position: relative;
}

#carousel table {
  position: absolute;
  top: 0px;
  left: 0px;
}

#carousel .image {
  position: absolute;
  top: 10px;
  left: 10px;
}

请让我知道您是否仍然遇到麻烦。

如何在像转盘一样工作的图像转盘上放桌子？

1 个答案: