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>

Saya menggunakan fungsi berikut -

Mencoba menetapkan nilai baru td dari tr yang baru dikloning, tetapi itu hanya menunjukkan nilai lama. Itu mengkloning elemen tr dengan baik tetapi hanya menunjukkan nilai lama. Saya ingin sel tr kloning baru memiliki nilai baru yang diteruskan ke fungsi. Dan juga jika saya mencoba memeriksa panjang tr yang baru dikloning ini dengan melakukan findElementsByTag, ia mengembalikan 0.

0
gr_aman 25 Mei 2020, 15:21

1 menjawab

Jawaban Terbaik

Anda dapat menyederhanakan mengakses elemen <td> dengan menggunakan clone.cells lalu mengulangi koleksi itu atau mengakses sel tertentu berdasarkan indeks

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>
1
charlietfl 25 Mei 2020, 12:53