[英]Javascript for filling in table html cells
I am trying to make a table that can make a +, x, H and in different colors and then on click it draws on the table.我正在尝试制作一个可以制作 +、x、H 和不同颜色的表格,然后单击它在桌子上绘制。 Could anyone help me out?有人可以帮我吗? I don't expect you to write the full code but if you could maybe provide some advice and/or example code I would totally appreciate it!我不希望您编写完整的代码,但如果您能提供一些建议和/或示例代码,我将不胜感激!
<!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>
I don't know if you can see but I the <td name="h">
I thought that would be the way to go to fill in each cell at least for H and then I was going to use multiple names if they overlapped if that's even possible?我不知道你是否能看到,但我的<td name="h">
我认为这将是至少为 H 填充每个单元格的方法,然后如果它们重叠,我将使用多个名称如果这可能吗?
I did this using javascript 我是用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>
I did this using jquery 我用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>
You can have it this way你可以这样
HTML 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");
}
Credits to http://dotnetwithsqlserver.blogspot.com/2016/11/how-to-manipulate-and-fill-html-table.html归功于http://dotnetwithsqlserver.blogspot.com/2016/11/how-to-manipulate-and-fill-html-table.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.