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 Object Methods ，您只能：

显示带有消息和确定按钮的警报框-Window alert() Method
显示一个对话框，其中包含消息，“确定”和“取消”按钮-Window confirm() Method
显示一个带有消息，“确定”和“取消”按钮的对话框-窗口提示（）方法

必须在表单的内部将HTML用于文档正文。

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

2 个答案: