如何在警报框中插入单选按钮

Question

我正在根据用户输入生成一个表。单击函数时查找表单元格索引。我正在尝试包含带有单选按钮的警报。单击单元格时将生成警报，并且该警报框应具有单选按钮。我试过这个，但出了点问题。

function CreateTable() {
var rowCtr;
var cellCtr;
var rowCnt;
var cellCnt;
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('Table');
table.setAttribute("contenteditable", "true");
table.border = '1';
table.id = 'myTable';
var tableBody = document.createElement('Tbody');
table.appendChild(tableBody);
rowCnt = document.getElementById('txtrows').value;
cellCnt = document.getElementById('txtcols').value;
for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
var tr = document.createElement('tr');
tableBody.appendChild(tr);
for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
var td = document.createElement('td');
td.width = '120';
td.appendChild(document.createTextNode("Click me," + rowCtr + +cellCtr));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
CellIndex();
}
function CellIndex() {
$(document).ready(function() {
$('#myTable').on('click', 'td', function() {
var columnIndex = $(this).parent().find('td').index(this);
var rowIndex = $(this).parent().parent().find('tr').index($(this).parent());
//alert('ColumnIndex' + " " + columnIndex + 'RowIndex' + rowIndex);
var popUpList = $('<input type="radio">Insert Before<br><input type="radio">Insert After');
alert('popuplist' + popUpList);
});
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table contenteditable="true">
<tr>
<td>Row Count</td>
<td>Column Count</td>
<td></td>
</tr>
<tr>
<td><input type="text" id="txtrows" /></td>
<td><input type="text" id="txtcols" /></td>
<td><button onclick="CreateTable()">Create Table</button></td>
</tr>
</table>
<div id="myDynamicTable"></div>

Answer 1

alert()是由浏览器(客户端(软件生成和呈现的图形组件。它不是网页的一部分，也无法在其中呈现HTML - 只能呈现纯文本。

但是，您可以通过从HTML和CSS构建自己的对话框并将其隐藏以备不时之需来获得所需的结果。发生这种情况时，您可以通过JavaScript显示它。

下面是一个示例：

let selectedColor = "";
// Get DOM references to elements we'll want to refer to multiple times
let dialog = document.getElementById("dialog");
let result = document.getElementById("result");
let mask = document.getElementById("mask");
// Set up event handlers for the buttons
document.getElementById("show").addEventListener("click", function(){
mask.classList.remove("hidden");   // Show the mask
dialog.classList.remove("hidden"); // Show the dialog
});
document.getElementById("hide").addEventListener("click", function(){
mask.classList.add("hidden");   // Hide the mask
dialog.classList.add("hidden"); // Hide the dialog
result.textContent = "You chose: " + selectedColor;
});
// Set up event listener on dialog for radio button clicks
dialog.addEventListener("click", function(event){
// If the source of the click was a radio button, capture its value
if(event.target.type === "radio"){
selectedColor = event.target.value;
}
});

.hidden { display:none; } /* used by the dialog by default */
/* When the dialog is shown, the mask will cover the main web page */
#mask {
position:absolute;
background-color:rgba(0,0,0,.25);
top:0;
left:0;
right:0;
bottom:0;
z-index:1; /* This layers the mask on top of the main web page content. */
}
/* Style the dialog and the elements in it as you wish */
#dialog { 
position:absolute; /* So the dialog can be in its own layer and placed anywhere we want */
top:20%;
left:25%;
border:10px double #222;
background-color:aliceblue;
padding:10px;
width:50%;
height:125px;
text-align:center;
z-index:10;  /* Make sure the dialog is in the top layer */
}
#dialog > h1 {
margin-top:0;
}
#dialog > footer {
margin-top:1.5em;
}
#result {
text-align:center;
font-weight:bold;
font-size:2em;
margin:2em;
}

<input type="button" value="Show Dialog" id="show">
<!-- This div will be as big as the entire page and it will be layered
in front of the main content, but under the dialog, creating a "modal" effect  -->
<div id="mask" class="hidden"></div>
<div id="dialog" class="hidden">
<h1>Please pick a color</h1>

<div>
<label><input type="radio" name="color" value="red">Red</label>
<label><input type="radio" name="color" value="white">White</label>
<label><input type="radio" name="color" value="blue">Blue</label>
</div>

<footer>
<input type="button" value="Hide Dialog" id="hide">
</footer>
</div>
<div id="result"></div>

Answer 2

本机，使用Window 对象方法，您只能：

• 显示带有消息和"确定"按钮的警告框 - 窗口 alert(( 方法
• 显示一个对话框，其中包含一条消息、一个"确定"和一个"取消"按钮 - 窗口确认(( 方法
• 显示一个对话框，其中包含一条消息、一个"确定"和一个"取消"按钮 - 窗口提示符(( 方法

HTML 必须在表单内部使用到文档正文中。