如何通过JavaScript动态增加输入控件....?

时间:2017-06-22 05:40:24

标签: javascript html css

我用循环将表复制到n次。以下代码仅适用于第一个表。我怎样才能在所有表格中工作?我是初学者。



function copy() {
  var text1 = document.getElementById("Name1").value;
  document.getElementById("Name2").value = text1;
  var text2 = document.getElementById("Name3").value;
  document.getElementById("Name4").value = text2;
}

<td rowspan="3" style="height:100px;">Name <input type="text" name="Emp name" placeholder="enter your name" id="Name1" /><br> ID <input type="id" name="Emp Id" placeholder="enter id" id="Name3"> </td>

<tr id="p001">
  <td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy();" /><label for="text"> Name : <input type="text" id="Name2"></label>
    <label for="text"> ID   : <input type="id" id="Name4"></label> </td>
</tr>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

ID应该始终是唯一的。当使用重复的ID时,它只能在第一个ID上工作而忽略其余的ID。通过将选择器推入函数,您可以将函数重用于多个表。

https://jsfiddle.net/m5aqdswe/

onclick="copy('Name');"

function copy(selector) {
    var text1 = document.getElementById(selector + "1").value;
    document.getElementById(selector + "2").value = text1;
    var text2 = document.getElementById(selector + "3").value;
    document.getElementById(selector + "4").value = text2;
}

希望这有帮助

编辑以帮助解决您的未婚错误

检查完代码后,我发现您没有实现我的修复程序。你有一个onclick on按钮调用copy();.你没有传入任何参数,所以你的JS是静态的。因此,当您添加另一个表时,您将创建重复的ID。

当搜索ID document.getElementById(“Name1”)时,它将搜索DOM,直到找到第一个id =“Name1”然后停止。这就是为什么你的第二张表永远无法运作

要解决这个问题,我们需要将您的ID名称输入到函数中,以便JS变为动态。 copy('Name')其中“Name”是您ID的第一部分。这些数字仍将被使用。

在函数中,您需要通过将参数传递给函数并随意调用它来获取参数。我选择了“选择器”,因为它最具描述性。的onclick = “拷贝(选择器)”

该函数不会将所有'selector'变量替换为您传递的字符串,即“Name”,因此document.getElementById(selector +“1”)实际上将是document.getElementById(“Name1”)。这样你可以创建任意数量的克隆,但记得更改克隆表ID并将正确的参数传递给onclick。

这是你固定的小提琴。 https://jsfiddle.net/3shjhu98/2/

请不要只是复制,去看看我做了什么。您需要修复克隆函数以使用动态参数而不是静态参数。

答案 1 :(得分:0)

function check() {

    var rowCount = $('table.mytable tbody tr');

    for (var index = 0; index < rowCount.length; index++) {
        var tr = $('table.mytable tbody tr')[index];

        var td = $(tr).find('td');

        for (var j = 0; j < rowCount.length; j++) {

            copy('table.mytable tbody tr[data-index=' + index + '] td[data-index=' + j + ']');
            
        }
    }
}

function copy(selector) {
 
    var val_1 = $(selector).find('input:first').val();
   
    $(selector).find('input:last').val(val_1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <table class="mytable">
            <tbody>
                <tr data-index="0">
                    <td data-index="0">
                        <input type="text" onblur="check()" />
                        <input type="text" />
                    </td>
                </tr>
            </tbody>
        </table>

您好。试试吧......

答案 2 :(得分:-2)

我认为您需要像[table.className]等那样传递表格选择器,然后找到输入文本框并获取值并将其粘贴到另一个文本框中。

喜欢这个。

System.setProperty("webdriver.gecko.driver","C:\\Users\\Ruchi\\workspace2\\SeleniumTest\\jar\\geckodriver-v0.17.0-win64\\geckodriver.exe");
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
String url = "https://accounts.google.com/signin";
driver.get(url);
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); 
WebElement email_phone = driver.findElement(By.xpath("//input[@id='identifierId']"));
email_phone.sendKeys("error59878@gmail.com");
driver.findElement(By.id("identifierNext")).click();
WebElement password = driver.findElement(By.xpath("//input[@name='password']"));
WebDriverWait wait = new WebDriverWait(driver, 20);
wait.until(ExpectedConditions.elementToBeClickable(password));
password.sendKeys("test1");
driver.findElement(By.id("passwordNext")).click();