javascript - JS获取动态网格中按钮的值

Question

• 方 block = 按钮，x = 单击，x = 值

如何在单击按钮时创建文本区域值，其中包含每个方 block 的值以及未选择的任何内容的空值， 即

<textarea>x,&bnsp;,&bnsp; ,&bnsp;\n,&bnsp;x,&bnsp; ,&bnsp;\n etc.</textarea>

基本上，文本输出需要以纯文本形式反射(reflect)方 block 的值，这就是为什么我需要空值来创建“视觉效果”。 每行中的行和方 block 也会在页面加载时根据默认值或更改的值动态生成。

谢谢!

Answer 1

它需要一些 jQuery，但这可以满足您的需求。

var result = [];
var idnum;
for (var i = 1; i < 10; i++) {
  result.push($("#" + i).html() + ",");
}
$(".result").html(result);
$(".button").click(function() {
  idnum = $(this).attr("id");
  $(this).html("x");
  result[idnum - 1] = "x,";
  $(".result").html(result);
});

.button {
  width: 50px;
  height: 50px;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" id="1"> </button>
<button class="button" id="2"> </button>
<button class="button" id="3"> </button>
<br>
<button class="button" id="4"> </button>
<button class="button" id="5"> </button>
<button class="button" id="6"> </button>
<br>
<button class="button" id="7"> </button>
<button class="button" id="8"> </button>
<button class="button" id="9"> </button>
<br><br>
<textarea class="result">Result</textarea>