猿问

如何在纯JavaScript中将新值插入克隆的表行的单元格中?

 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>



我正在使用以下函数 -

尝试设置新克隆的 tr 的 td 的新值,但它仅显示旧值。它可以很好地克隆 tr 元素,但仅显示旧值。我希望新克隆的tr的单元格将新值传递给函数。而且,如果我尝试通过执行findElementsByTag来检查这个新克隆的tr的长度,它将返回0。


哔哔one
浏览 85回答 1
1回答

白猪掌柜的

您可以通过使用然后迭代该集合或按索引访问特定单元格来简化对元素的访问<td>clone.cellsfunction copy_checklist(row_id, poNum) {&nbsp; var row = document.getElementById("item"); //get table row&nbsp; var table = document.getElementById("checklist");&nbsp; var clone = row.cloneNode(true);&nbsp; var cells = clone.cells;&nbsp; clone.id = row_id;&nbsp; cells[0].innerHTML = poNum&nbsp; // OR&nbsp; //Array.from(cells).forEach((cell, index) => cell.innerHTML = poNum);&nbsp; table.appendChild(clone);}<!DOCTYPE html><html xmlns='http://www.w3.org/1999/xhtml'><head>&nbsp; <meta charset='utf-8' />&nbsp; <title></title>&nbsp; <style>&nbsp; &nbsp; tr {&nbsp; &nbsp; &nbsp; height: 40px;&nbsp; &nbsp; }&nbsp; </style></head><body onLoad="copy_checklist('1', 'po-202')">&nbsp; <table border='0' cellspacing='0' cellpadding='0' style='font-family: Arial; font-size: 12px;'>&nbsp; &nbsp; <tbody id="checklist">&nbsp; &nbsp; &nbsp; <tr id="item">&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="poNum">po2</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="skuNum">sku</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="itemDesc">desc</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="lotId">WK 14</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="lotSize">1</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="sampleSize">2</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="criticalDefects">3</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="majorDefects">4</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="minorDefects">5</div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td style='padding:5px 2px;border:1px solid #000000;border-left:0px;border-top:0px;font-family:Arial;font-size:12px;width:350px;'></td>&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; See Pic&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ok&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <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'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; %&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答