将元素存储到网格中

Question

如何在 table 中打乱和存储字符串中的每个字符，使得第一个字母对位于随机行位置，第二个字母位于随机列位置，以便 2 个字符在同一行或列中不冲突吗？这是我创建 7x7 网格的代码

<table border="5px" cellspacing="30" align="center" class="table-bordered"  style="color:#FFFFFF" width="400px" height="200px">
<% for(int row=1; row <= 7; row++) { %>
<tr>
<%      for(int col=1; col<=7; col++) { %>
<td></td>
    <% } %>
</tr>
<% } %>
</table>

这是我的字符串改组代码

<script>
  function f1() {
    var str = "abcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()<>?";
    var shuffled = str.split('').sort(function({
      return0.2Math.random();
    }).join('');
    document.write(shuffled);
  }   
</script>

现在我希望将这个打乱的字符串拆分并存储到 table 的每个单元格中。

Answer 1

你为什么要麻烦你的 jsp 这样做？让您的脚本 (jQuery) 执行此操作。在你的 HTML 中将 id 属性添加到你的 table 中，像这样，

<div id="myDiv">
   <table id="myTable" border="5px" cellspacing="30" 
       align="center" class="table-bordered" width="400px" height="200px">
             <!-- Your content goes here -->
   </table>
</div>

并且在您的脚本中使用打乱的字符串，您可以像这样创建 table，

$(document).ready(function() {

     var myWord = "hello";  //Use any shuffled string
     var length = myWord.length; 
     var createTable = '<tr>';
     for ( var i=0; i < length; i++) {   //Iterate through each character
       if (myWord.charAt(i) != " ") {
           // Create as table cell
           createTable = createTable+'<td>'+myWord.charAt(i)+'</td>';
       } 
     };
     createTable = createTable+'</tr>';
     $("#myTable").append(createTable);
});

检查working sample。

更新：

希望这是你问的，如何找到特定的 table 定义。

$('#mytable tr').each(function() {
     $(this).find("td:eq(0)").html("Your Shuffled Character maybe h"); // First cell    
});

将元素存储到网格中

Storing elements into a grid

javascript

jsp

shuffle

twitter-bootstrap