Question

我正在尝试使用用户输入提示创建一个表，该提示被保存到变量中。我希望能够获取该变量并使其成为偶数行和列。因此，例如，如果用户输入为5，我想制作一个5x5表。

我可以接受用户的输入并输出正确的行数，但是我的列遇到了问题。

有人能提供一些关于我的代码的见解吗？我的小提琴如下：

$(document).ready(function() {
    //cache all jquery objects in variables
    var $button = $('.button');
    var $wrapper = $('.wrapper');
    var $bones = $('.bones');
    var $rows = $('.rows');

    $button.click(function() {

        //prompt user for input on table size
        var inp = prompt("Enter a number");

        for (var i = 0; i < inp; i++) {
            $bones.append("<tr class='rows'></tr>");
            $rows.append("<td class='block'></td>");
        };
    });

});

https://jsfiddle.net/81zv9zjs/

Answer 1

你需要在tr元素中附加td元素，所以不要像你拥有的那样循环，尝试：

for (var i = 0; i < inp; i++) {

  var elem = $("<tr class='rows'></tr>");

  for (var j = 0; j < inp; j++) {
    elem.append("<td class='block'></td>");
  }

  $bones.append(elem);

};

Answer 2

这样的事情应该让你开始：

$(document).ready(function() {
  //cache all jquery objects in variables
  var $button = $('.button');
  var $bones = $('.bones');

  $button.click(function() {
    //prompt user for input on table size
    var rr = prompt("Rows");
    var cc = prompt("Cols");

    for (var i = 0; i < rr; i++) {
      var row = $('<tr class="rows"></tr>');
      for (var j = 0; j < cc; j++) {
        row.append('<td width="20">&nbsp;</td>');
      }
      $bones.append(row);
    }
  });

});

table {width: 100%;border-collapse: collapse;}
th,td {border: 2px solid #ccc;}

.button {
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 20px;
  width: 100px;
  margin: 0 auto;
  margin-bottom: 10px;
  background-color: black;
  color: white;
}
.wrapper {
  height: 300px;
  width: 300px;
  background-color: red;
  margin: 0 auto;
}
.block {
  background-color: white;
  height: 20px;
  width: 20px;
  padding: 10px;
  border: solid 0.1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="button"> Click Here! </a>

<div class='wrapper'>
  <table class="bones"></table>
</div>

Answer 3

让我们有更广泛的方法。假设您必须创建一个包含一些数据的表。必须以与以下类似的方式在对象结构中提供该数据;

[ { Prop_0: 'Value_0',
    Prop_1: 'Value_1',
    Prop_2: 'Value_2',
    Prop_3: 'Value_3',
    Prop_4: 'Value_4' },
  { Prop_0: 'Value_5',
    Prop_1: 'Value_6',
    Prop_2: 'Value_7',
    Prop_3: 'Value_8',
    Prop_4: 'Value_9' },
  { Prop_0: 'Value_10',
    Prop_1: 'Value_11',
    Prop_2: 'Value_12',
    Prop_3: 'Value_13',
    Prop_4: 'Value_14' },
  { Prop_0: 'Value_15',
    Prop_1: 'Value_16',
    Prop_2: 'Value_17',
    Prop_3: 'Value_18',
    Prop_4: 'Value_19' },
  { Prop_0: 'Value_20',
    Prop_1: 'Value_21',
    Prop_2: 'Value_22',
    Prop_3: 'Value_23',
    Prop_4: 'Value_24' } ]

其中属性将指定标头，值为<td>单元格值。 tableMaker将此对象作为第一个参数并将其转换为表格HTML标记文本。如果第二个参数为true，则第一个对象的属性将用于<th>数据。所以，让我们看看......

＆＃13;

function tableMaker(o,h) {
  var keys = o.length && Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
  rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return rows.length ? "<table>" + rows + "</table>" : "";
}

var data = [{"Prop_0":"Value_0","Prop_1":"Value_1","Prop_2":"Value_2","Prop_3":"Value_3","Prop_4":"Value_4"},{"Prop_0":"Value_5","Prop_1":"Value_6","Prop_2":"Value_7","Prop_3":"Value_8","Prop_4":"Value_9"},{"Prop_0":"Value_10","Prop_1":"Value_11","Prop_2":"Value_12","Prop_3":"Value_13","Prop_4":"Value_14"},{"Prop_0":"Value_15","Prop_1":"Value_16","Prop_2":"Value_17","Prop_3":"Value_18","Prop_4":"Value_19"},{"Prop_0":"Value_20","Prop_1":"Value_21","Prop_2":"Value_22","Prop_3":"Value_23","Prop_4":"Value_24"}],
tableHTMLText = tableMaker(data,true);

document.write(tableHTMLText);
console.log(tableHTMLText);

＆＃13;

我希望它有所帮助。

如何使用Javascript / JQuery的用户输入创建表

3 个答案: