用于填充表格 html 单元格的 Javascript答案

【问题标题】：Javascript for filling in table html cells用于填充表格 html 单元格的 Javascript
【发布时间】：2014-05-08 18:32:34
【问题描述】：

我正在尝试制作一个可以制作 +、x、H 和不同颜色的表格，然后单击它会在表格上绘制。谁能帮帮我？我不希望您编写完整的代码，但如果您能提供一些建议和/或示例代码，我将不胜感激！

<!HTML>
<html>
<head>
<title>JScript</title>
<script language="javascript">

function Design()
{

}

</script>
</head>
<body>

<table border="1px" cellpadding="30px">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>

Pattern Choice: <br>
<input type="radio" name="sign" value="plus"> Plus Sign <br>
<input type="radio" name="sign" value="X"> Letter X <br>
<input type="radio" name="sign" value="H"> Letter H <br><br>

Color Choice: <br>
<select name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>

<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear">

</body>
</html>

我不知道你是否能看到，但我 <td name="h"> 我认为这将是至少为 H 填写每个单元格的方法，然后如果它们重叠，我将使用多个名称甚至可能？

【问题讨论】：

table that can make a +, x, H wot 是这样的.. 你的问题能不能说得更清楚一些？？

标签： javascript html html-table cells

【解决方案1】：

这样就可以了

HTML

<table id="transactions_table_name" class="table project-table table-centered table-nowrap">
 <thead>
     <tr>
         <th scope="col">Transaction Type</th>
         <th scope="col">Code</th>
         <th scope="col">Previous balance</th>
         <th scope="col">Amount</th>
         <th scope="col">Last Balance</th>
         <th scope="col">Date</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
                            
</table>

JAVASCRIPT

for (let i = 0; i < transactions.length; i++) {
  var transaction = transactions[i];
  $("<tr><th scope='row'>" + transaction.type + "</th><td>" + transaction.code + 
  "</td><td>" + transaction.previousBalance + "</td><td>" + transaction.amount + 
  "</td><td> " + transaction.lastBalance + "</td><td>" + transaction.date + " 
  </td></tr>").appendTo("#transactions_table_name");

}

感谢http://dotnetwithsqlserver.blogspot.com/2016/11/how-to-manipulate-and-fill-html-table.html

【讨论】：

【解决方案2】：

我是用 javascript 做的

 <html>
<head>

          function Design() {
            var desgn;
            if (document.getElementById('r1').checked) {
                desgn = document.getElementById('r1').value;
            }
            if (document.getElementById('r2').checked) {
                desgn = document.getElementById('r2').value;
            }
            if (document.getElementById('r3').checked) {
                desgn = document.getElementById('r3').value;
            }
            console.log(desgn);
            var e = document.getElementById("list");
            var colr = e.options[e.selectedIndex].value;

            var tabs = document.getElementById("tbl");
            var rows = tabs.rows.length;
            var trs = tabs.getElementsByTagName("tr")[0];
            var tds = trs.cells
            var colms = tds.length

            var table = document.getElementById("tbl");
            for (var i = 0, row; row = table.rows[i]; i++) {
                for (var j = 0, col; col = row.cells[j]; j++) {
                    if (desgn == 'X') {
                        var y = rows - i - 1;
                        if (i == j || j == y) {
                            trs = tabs.getElementsByTagName("tr")[i];
                            trs.cells[j].style.backgroundColor = colr;
                        }

                    }
                    else if (desgn == 'plus') {
                        if (i == 2 || j == 2) {
                            trs = tabs.getElementsByTagName("tr")[i];
                            trs.cells[j].style.backgroundColor = colr;
                        }
                    }
                    else if (desgn == "H") {
                        if (j == 1 || j == 3 || i == 2 && j == 2) {
                            trs = tabs.getElementsByTagName("tr")[i];
                            trs.cells[j].style.backgroundColor = colr;
                        }
                    }
                }
            }
        }
</script>

</head>
<body>

   <table border="1px" cellpadding="30px" id="tbl">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>

Pattern Choice: <br>

<input id='r1' type="radio" name="sign" value="plus"> Plus Sign <br>
<input id='r2' type="radio" name="sign" value="X"> Letter X <br>
<input id='r3' type="radio" name="sign" value="H"> Letter H <br><br>

Color Choice: <br>
<select id='list' name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>

<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear" >


</body>
</html>

【讨论】：

如果我可以投票，我会投票赞成，这就像一个魅力！谢谢一堆老兄，也很高兴看到代码（帮助我理解）！！！
你的表，它就像一个矩阵......我们只需要找到如何访问特定的单元格。您只有 3 个特定设计，逻辑 ws 仅用于获取这些单元格，对角线一次，中间行中的单元格以及 col 2 3 和 4 上的单元格。如果您喜欢我的代码，请将其标记为最佳答案，我是 stackoverflow 的新手

【解决方案3】：

我是用 jquery 做的

        function Design() {
            var desgn = $('body input[type=radio]:checked').val();
            var colr = $('body select option:selected').text();
            var MyRows = $('table').find('tr');
            var MyCells = $('table').find('tr').find('td');
            var MyColm = MyCells.length / MyRows.length
            for (var i = 0; i < MyRows.length; i++) {
                for (var j = 0; j < MyColm; j++) {
                    if (desgn == 'X') {
                        var x = MyRows.length;
                        var y = x - i - 1;
                        if (i == j || j == y)
                            $('body table tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', colr);
                    }
                    else if (desgn == 'plus') {
                        if(i==2||j==2)
                            $('body table tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', colr);
                    }
                    else if(desgn=="H") {
                        if (j == 1 || j == 3 ||i==2 && j==2)
                            $('body table tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', colr);
                    }
                }
            }

        }

</script>

</head>
<body>

<table border="1px" cellpadding="30px">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>

Pattern Choice: <br>

<input type="radio" name="sign" value="plus"> Plus Sign <br>
<input type="radio" name="sign" value="X"> Letter X <br>
<input type="radio" name="sign" value="H"> Letter H <br><br>

Color Choice: <br>
<select name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>

<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear" onclick="clearall()">


</body>
</html>

【讨论】：