Question

为了使我的WebApp正常运行，我需要以某种方式在每个Image上放置一次表格。但是表格的位置不能超过图片，因此我需要通过img的Length来调整按钮的大小。

按钮的作用应类似于存储Y和X坐标的点。

直到现在，我已经设法通过here

生成所需的表格和图像/缩略图滑块。

但是我无法将这两种方式有意义地结合在一起。

<div class="slider">
            <input type="radio" name="slide_switch" id="id1" />
            <label for="id1">
                <div id="Table"></div>
                <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100" />

            </label>
            <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" />

            <!--Lets show the second image by default on page load-->
            <input type="radio" name="slide_switch" id="id2" checked="checked" />
            <label for="id2">
                <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100" />
            </label>
            <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" />

            <input type="radio" name="slide_switch" id="id3" />
            <label for="id3">
                <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100" />
            </label>
            <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" />

            <input type="radio" name="slide_switch" id="id4" />
            <label for="id4">
                <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100" />
            </label>
            <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" />

            <input type="radio" name="slide_switch" id="id5" />
            <label for="id5">
                <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100" />
            </label>
            <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" />

和桌子：

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

        <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 = 100

                for (var i = 0; i < Y; 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();
 function myFunction() {
               /*It doesn't matter here*/
            }
</script>

我的老板给我发送了一个示例（我对其进行了调整）：

如何使表格变成图像滑块？

0 个答案: