Как вставить новые значения в ячейки клонированной строки таблицы в чистом JavaScript? - PullRequest
Новая
       7

Как вставить новые значения в ячейки клонированной строки таблицы в чистом JavaScript?

0 голосов
/ 25 мая 2020 

 function copy_checklist(row_id, poNum) {
            var row = document.getElementById("item"); //get table row
            var table = document.getElementById("checklist");
            var clone = row.cloneNode(true);
            clone.id = row_id;
            var tds = null;
            for (var i = 0; i < clone.length; i++) {
            	tds = clone[i].getElementsByTagName("td");
            	for (var n = 0; n < tds.length; n++) {
            		tds[n].innerHTML = poNum;
            	}
            }

            table.appendChild(clone);
        }
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8'/>
    <title></title>
    <style>tr {height: 40px;}</style>
</head>
<body  onLoad="copy_checklist('1', 'po-202')">
<table border='0' cellspacing='0' cellpadding='0' style='font-family: Arial; font-size: 12px;'>
  <tbody id="checklist">
        <tr id="item">
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-top:0px;font-family:Arial;font-size:12px;text-align:center!important;word-break: break-word;width:78px'>
                <div id="poNum">po2</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:77px'>
                <div id="skuNum">sku</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:85px'>
                <div id="itemDesc">desc</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:58px'>
                <div id="lotId">WK 14</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:65px'>
                <div id="lotSize">1</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
                <div id="sampleSize">2</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
                <div id="criticalDefects">3</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
                <div id="majorDefects">4</div>
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
                <div id="minorDefects">5</div>
            </td>
            <td style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:350px;'></td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'></td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'>
                See Pic
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'>
                Ok
            </td>
            <td nowrap='nowrap'
                style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'>
                %
            </td>
        </tr>
        </tbody>
</table>

Я использую следующую функцию -

пытаюсь установить новое значение td недавно клонированного tr, но оно показывает старое значение только. Он отлично клонирует элемент tr, но показывает только старое значение. Я хочу, чтобы в новые клонированные ячейки tr были переданы новые значения. А также, если я попытаюсь проверить длину этого недавно клонированного tr, выполнив findElementsByTag, он вернет 0.

1 Ответ

1 голос
/ 25 мая 2020

Вы можете упростить доступ к элементам <td>, используя clone.cells, а затем перебрать эту коллекцию или получить доступ к c ячейкам по индексу 

function copy_checklist(row_id, poNum) {
  var row = document.getElementById("item"); //get table row
  var table = document.getElementById("checklist");
  var clone = row.cloneNode(true);
  var cells = clone.cells;

  clone.id = row_id;
  cells[0].innerHTML = poNum
  // OR
  //Array.from(cells).forEach((cell, index) => cell.innerHTML = poNum);

  table.appendChild(clone);
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>

<head>
  <meta charset='utf-8' />
  <title></title>
  <style>
    tr {
      height: 40px;
    }
  </style>
</head>

<body onLoad="copy_checklist('1', 'po-202')">
  <table border='0' cellspacing='0' cellpadding='0' style='font-family: Arial; font-size: 12px;'>
    <tbody id="checklist">
      <tr id="item">
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-top:0px;font-family:Arial;font-size:12px;text-align:center!important;word-break: break-word;width:78px'>
          <div id="poNum">po2</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:77px'>
          <div id="skuNum">sku</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:85px'>
          <div id="itemDesc">desc</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:58px'>
          <div id="lotId">WK 14</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:65px'>
          <div id="lotSize">1</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
          <div id="sampleSize">2</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
          <div id="criticalDefects">3</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
          <div id="majorDefects">4</div>
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;word-break: break-word;width:50px'>
          <div id="minorDefects">5</div>
        </td>
        <td style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:350px;'></td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'></td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'>
          See Pic
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'>
          Ok
        </td>
        <td nowrap='nowrap' style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:40px;word-break: break-word;width:50px'>
          %
        </td>
      </tr>
    </tbody>
  </table>
...