缩小Javascript并提高性能

以下是我的html代码：

<div class="board">
  <table id="mastermind_table_one">
    <tr id="one">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
 </table>

  <table id="mastermind_table_two">
    <tr id="two">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

  <table id="mastermind_table_three">
    <tr id="three">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
  </table>
</div>

我正在制作一个游戏，当点击下一轮按钮时，所有空的tds都会填充一个随机背景色。还有更多的代码，比如setRandomColor函数，但它与问题无关

我一共有十张智囊团表格，这就是问题所在。我正在为每个表重复此代码。有人知道我如何只列出一次，然后在单击下一轮时转到下一个td吗

i、 e.上面的js代码是特定于mastermind_table_two的。在执行上一个td后，如何使其动态并移动到下一个td？

更新

我错了，一定是把你的问题读错了

试试这个，它有点粗糙，但可能适合你的需要

 $('.next_round').click(function () {
        $('[id^=mastermind_table_]').each(function () {
            $(this).addClass("notTreated");//a fake class just to control
        });
        var counter = setInterval(timer, 1000);

        function timer() {
            var currenttable;
            if ((currenttable = $(".notTreated").first()) == null) {
                clearInterval(counter);
                return;
            }

            $(currenttable).find('td').each(function () {
                $(this).css("background-color", setRandomColor);
            });
            //after treat this table, removes the fake class
            $(currenttable).removeClass("notTreated");
        }
    });

---

你可以使用选择器[id^=mastermind\u table]，或者更好的是，如果它们相似，就给它们类，然后按类选择：如果你以结束div，你应该修复这个opps，对不起。我发了一封信，但发错了。谢谢你的批改。我刚试过这个，看起来它一次就填满了所有的10行。我希望只填写一行，然后当您单击下一轮时，它会填写下一行，等等。您知道这是否可行吗？？？谢谢Silvio。我刚试过这个，看起来它一次就填满了所有的10行。我希望只填写一行，然后当你单击下一轮时，它会填写下一行，等等。你知道这是否可行吗？？？@user3007294如果你想每次单击一行，而不是设置intervartimer，1000，只需调用timer

 $('.next_round').click(function () {
        $('[id^=mastermind_table_]').each(function () {
            $(this).addClass("notTreated");//a fake class just to control
        });
        var counter = setInterval(timer, 1000);

        function timer() {
            var currenttable;
            if ((currenttable = $(".notTreated").first()) == null) {
                clearInterval(counter);
                return;
            }

            $(currenttable).find('td').each(function () {
                $(this).css("background-color", setRandomColor);
            });
            //after treat this table, removes the fake class
            $(currenttable).removeClass("notTreated");
        }
    });