Question

我在使用insertRow＆amp; amp; insertcell（），我一直在寻找过去几个小时，但不幸的是，我还没有找到答案。

我有一个代码，可以在我的表中添加一个包含5个单元格的新行。

function myCreateFunction() {

var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input type=\"text\" id=\"des\" name=\"des\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell2.innerHTML = "<input type=\"text\" id=\"qu\" name=\"qu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell3.innerHTML = "<input type=\"text\" id=\"pu\" name=\"pu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell4.innerHTML = "<input type=\"text\" id=\"rl\" name=\"rl\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell5.innerHTML = "<input type=\"text\" id=\"tlht\" name=\"tlht\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";

return false;
}

function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);

return false
}

每次按下按钮，

onclick="return myCreateFunction()"

添加了一个新行，但问题是，如果我添加2行，则每个5个单元格将具有相同的ID＆amp;名称。每个cell1将具有相同的ID，每个cell2将具有相同的ID .....

无需说这是在表单中使用，我需要添加新行并添加内容，这些内容将保存在数据库中。

我需要什么？我需要在每次创建新行时在NAME和ID旁边添加一个数字。

我需要的例子：

如果我点击按钮，它将创建所有5个新单元但ID＆amp; NAME更改。这里和现在，第一个单元格的名称和ID是＆＃34; des＆＃34;当按钮点击我需要des1时，当我再次点击时，我创建了一个新行，但是单元格名称和id是des2 .. des3 ... des4 ...该号码应该应用于所有id和名称＆＃39 ;在OnClick上创建的所有单元格的。

不知道它是否足够清楚。

非常感谢，非常感谢帮助。

Answer 1

创建一个像count一样的全局变量，并用它来创建id。

注意：检查时，您可以在字符串中使用'而不是\"来澄清：

cell1.innerHTML = "<input type='text' id='des" + count + "' name='des' placeholder='' class='form-control input-sm' value=''/>";

PS：在添加一行结束时记得增加计数并在必要时重置它

count = count + 1

Answer 2

此处有多个选项：保留每次调用函数时的跟踪列表

var index = 0;

function myCreateFunction() {
   ....your function.....
   cell.id = "des" + index;
   index++;
}

generate a unique id every time
function newGuid()
{
    //Generates a guid.
    var returnGuid = "";
    var hexChar = "abcdef1234567890";

    for (var i = 0 ; i < 32 ; i++)
    {
        returnGuid += hexChar.charAt(Math.random()*16);
        if(i == 7 || i == 11 || i == 15 || i == 19)
        {
            returnGuid += "-";
        }

    }
    return returnGuid.toString();
}

"... id=\"des\" " + newGuid()

Answer 3

这是在添加新行时使用的原始代码，这是每次按下按钮ADD LINE（或法语AJOUTER）时输入行的ID应增加的位置

            <div class="row">
                <div class="col-xs-12">
                    <div class="portlet box red ">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-gift"></i>Devis
                                </div>
                            </div>
                            <div class="portlet-body form">
                                    <table id="myTable">
                                    <tr>
                                        <td width="40%"><center><b>Description</b></center></td>
                                        <td width="10%"><center><b>Quantité</b></center></td>
                                        <td width="20%"><center><b>Prix U HT</b></center></td>
                                        <td width="10%"><center><b>Remise %</b></center></td>
                                        <td width="20%"><center><b>Total</b></center></td>
                                    </tr>
                                    <tr>
                                        <td colspan="5"></td>
                                    </tr>
                                    <tr>
                                        <td width="40%"><input type="text" id="des" name="des" placeholder="" class="form-control input-sm" value="<? echo $_POST['des']; ?>"/></td>
                                        <td width="10%"><input type="text" id="qu" name="qu" placeholder="" class="form-control input-sm" value="<? echo $_POST['qu']; ?>"/></td>
                                        <td width="20%"><input type="text" id="pu" name="pu" placeholder="" class="form-control input-sm" value="<? echo $_POST['pu']; ?>"/></td>
                                        <td width="10%"><input type="text" id="rl" name="rl" placeholder="" class="form-control input-sm" value="<? echo $_POST['rl']; ?>"/></td>
                                        <td width="20%"><input type="text" id="tlht" name="tlht" placeholder="" class="form-control input-sm" value="<? echo $_POST['tlht']; ?>"/></td>
                                    </tr>                                       
                                    </table>
                            </div>
                    </div>
                </div>
            </div>

JS代码一行

<script>
function myCreateFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input type=\"text\" id=\"des\" name=\"des\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell2.innerHTML = "<input type=\"text\" id=\"qu\" name=\"qu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell3.innerHTML = "<input type=\"text\" id=\"pu\" name=\"pu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell4.innerHTML = "<input type=\"text\" id=\"rl\" name=\"rl\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";
cell5.innerHTML = "<input type=\"text\" id=\"tlht\" name=\"tlht\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>";

return false;
}

function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);

return false
}

insertcell（）具有唯一ID

3 个答案: