JS如何插字符串使数据更易懂？

Question

JS代码

  $('#put_main').click(function () {
    for (i = 1; i <= 7; i++) {//I为TD个数
      const td = []
      td[i] = eval(`$("#tr_${i}>td").eq(2).text()`)//获取,实到,数据
      if (td[i] != '') {//判断实到不为空
        var td_a
        var new_yingdao_1 = ''
        for (td_a = 0; td_a < 9; td_a++) {//获取标题实到之后内容
          new_yingdao_1 += $($(`#tr_${i}`)).children('td').eq(td_a).text()//字符串进行累加
          //alert(k[td_a]);
        }
        all_all_nav += new_yingdao_1 + '\n'
        console.log(all_all_nav)

        $('#pd_nav').val(all_all_nav)//输出到文本框

        var inputElement = document.querySelector('#pd_nav')//复制内容到粘贴面板
        document.execCommand('copy')//执行复制
      }
    }
  })

HTML代码

<table id="frist_table" class="table table-bordered table-hover " style="text-align: center;">
    <tr class="info ">
        <td>班级</td>
        <td>应到</td>
        <td>实到</td>
        <td>请假</td>
        <td>未到</td>
        <td>其他</td>
        <td>国</td>
        <td>迟到</td>
        <td>厕所</td>
    </tr>
    <tr id="tr_1">
        <td contenteditable='false' data-role='one'>2101</td>
        <td contenteditable='false' data-role='one'>50</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_2">
        <td contenteditable='false' data-role='one'>2102</td>
        <td contenteditable='false' data-role='one'>49</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_3">
        <td contenteditable='false' data-role='one'>2103</td>
        <td contenteditable='false' data-role='one'>51</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_4">
        <td contenteditable='false' data-role='one'>2104</td>
        <td contenteditable='false' data-role='one'>48</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_5">
        <td contenteditable='false' data-role='one'>2101</td>
        <td contenteditable='false' data-role='one'>52</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_6">
        <td contenteditable='false' data-role='one'>2102</td>
        <td contenteditable='false' data-role='one'>51</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_7">
        <td contenteditable='false' data-role='one'>2103</td>
        <td contenteditable='false' data-role='one'>52</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr>
        <td colspan="2" class="danger">
            <button id="put_main" class="btn btn-primary btn-sm center-block">全部打印</button>
        </td>
        <td colspan="4" class="danger">
            <button id="" class="btn btn-primary btn-sm center-block">下载</button>
        </td>
        <td colspan="3" class="danger">
            <button onclick="Qingkong_one()" class="btn btn-primary btn-sm center-block">清空文本</button>
        </td>
    </tr>
</table>
<textarea οnfοcus="this.blur();" value="" rows="10" cols="50" id="pd_nav" type="text"
          style="width:100%;height: 125px;"></textarea>
</table>
</section>

<table id="frist_table" class="table table-bordered table-hover " style="text-align: center;">
    <tr class="info ">
        <td>班级</td>
        <td>应到</td>
        <td>实到</td>
        <td>请假</td>
        <td>未到</td>
        <td>其他</td>
        <td>国</td>
        <td>迟到</td>
        <td>厕所</td>
    </tr>
    <tr id="tr_1">
        <td contenteditable='false' data-role='one'>2101</td>
        <td contenteditable='false' data-role='one'>50</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_2">
        <td contenteditable='false' data-role='one'>2102</td>
        <td contenteditable='false' data-role='one'>49</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_3">
        <td contenteditable='false' data-role='one'>2103</td>
        <td contenteditable='false' data-role='one'>51</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_4">
        <td contenteditable='false' data-role='one'>2104</td>
        <td contenteditable='false' data-role='one'>48</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_5">
        <td contenteditable='false' data-role='one'>2101</td>
        <td contenteditable='false' data-role='one'>52</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_6">
        <td contenteditable='false' data-role='one'>2102</td>
        <td contenteditable='false' data-role='one'>51</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr id="tr_7">
        <td contenteditable='false' data-role='one'>2103</td>
        <td contenteditable='false' data-role='one'>52</td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
        <td contenteditable='true' data-role='one'></td>
    </tr>
    <tr>
        <td colspan="2" class="danger">
            <button id="put_main" class="btn btn-primary btn-sm center-block">全部打印</button>
        </td>
        <td colspan="4" class="danger">
            <button id="" class="btn btn-primary btn-sm center-block">下载</button>
        </td>
        <td colspan="3" class="danger">
            <button onclick="Qingkong_one()" class="btn btn-primary btn-sm center-block">清空文本</button>
        </td>
    </tr>
</table>
<textarea οnfοcus="this.blur();" value="" rows="10" cols="50" id="pd_nav" type="text"
          style="width:100%;height: 125px;"></textarea>
</table>
</section>

问题:当前输出的是一串数据，我需要插入将标题插入，

目标输出为 ：班级2104实到50应道49厕所1(其他为0不显示)

当前输出为210450491

Answer 1

//增加
   var tdTitle = ["班级","应到","实到","请假","未到","其他","国","迟到","厕所"]
  $('#put_main').click(function () {
    for (i = 1; i <= 7; i++) {//I为TD个数
      const td = []
      td[i] = eval(`$("#tr_${i}>td").eq(2).text()`)//获取,实到,数据
      if (td[i] != '') {//判断实到不为空
        var td_a
        var new_yingdao_1 = ''
        for (td_a = 0; td_a < 9; td_a++) {//获取标题实到之后内容
        // 修改
          new_yingdao_1 = new_yingdao_1 + tdTitle[td_a] + $($(`#tr_${i}`)).children('td').eq(td_a).text()//字符串进行累加
          //alert(k[td_a]);
        }
        all_all_nav += new_yingdao_1 + '\n'
        console.log(all_all_nav)

        $('#pd_nav').val(all_all_nav)//输出到文本框

        var inputElement = document.querySelector('#pd_nav')//复制内容到粘贴面板
        document.execCommand('copy')//执行复制
      }
    }
  })

// 修改了一下
const tdTitle = ["班级",  "应到",  "实到",  "请假",  "未到",  "其他",  "国",  "迟到",  "厕所",];
$("#put_main").click(function () {
  let all_all_nav = [];
  for (i = 1; i <= 7; i++) {
    const tds = $("#tr_${i}>td");
    if (tds.eq(2).text() != "") {
      //判断实到不为空
      for (let td_a = 0; td_a < 9; td_a++) {
        all_all_nav.push(tdTitle[td_a]);
        all_all_nav.push(tds.eq(td_a).text());
      }
      all_all_nav.push("\n");
    }
  }

  $("#pd_nav").val(all_all_nav.join("")); //输出到文本框

  var inputElement = document.querySelector("#pd_nav"); //复制内容到粘贴面板
  document.execCommand("copy"); //执行复制
});

Answer 2

$("#put_main").click(function () {
    const $table = $("#frist_table");
    const headers = $("tr.info td", $table)
        .map((_, td) => $(td).text())
        .toArray();

    const text = $("tr:not(:first)", $table)
        .map((_, tr) => getRowText(tr))
        .toArray()
        .join("\n");

    $("#pd_nav").val(text);
    var inputElement = document.querySelector("#pd_nav");//复制内容到粘贴面板
    document.execCommand("copy");//执行复制

    function getRowText(tr) {
        return $("td", tr).map((_, td) => $(td).text())
            .toArray()
            .map((t, i) => [headers[i], parseInt(t, 10) ?? 0])
            .filter(([, v]) => v > 0)
            .map(([h, v]) => `${h} ${v}`)
            .join("; ");
    }

});

CodePen: https://codepen.io/jamesfancy...