如何使用javascript在表中动态添加输入

时间:2017-01-16 08:42:07

标签: javascript jquery html css

我发现问题是我只能在第二个<td>

中添加输入
count=1;
function add_youtube_input() { 
    if(count<50) {
        var newspan = document.createElement('span');
        newspan.innerHTML = '<input type="text" name="youtube[]" style="width:170px;margin-top:5px;" maxlength="250"/> \
            <strong> ชื่อเพลง :</strong> \
            <input type="text" name="music_name[]" id="textfield" style="width:200px;" maxlength="250" /> <br/>';
        document.getElementById('youtube_field').appendChild(newspan);
        count++;
    }   
}

...

<tr class="highlight">
    <td width="15%" height="20" align="right" style="position:relative; vertical-align:top;"><strong>Youtube :</strong>
        <span style="position:absolute;top:30px;left:80px;font-size:11px;color:red;">(ใส่เป็นรหัสไอดีของคลิป 11 หลัก) </span>
    </td>
    <td id="youtube_field" width="28%" align="left"><input type="text" name="youtube[]" id="textfield" style="width:170px;" maxlength="250" required/>
        <strong> Music name :</strong>
        <input type="text" name="music_name[]" id="textfield" style="width:200px;" maxlength="250" />
        <a href="javascript:void(0);" onClick="add_youtube_input();" style="color:blue;"> + เพิ่ม </a> <br/>
    </td>
</tr>

结果是新输入将是第二个不好的。<td>

但我不知道如何添加第一个<td>

1 个答案:

答案 0 :(得分:0)

count=1;
function add_youtube_input()
{ 
    if(count<50)
    {
        var newspan = document.createElement('span');
        newspan.innerHTML = '<input type="text" name="youtube[]" style="width:170px;margin-top:5px;" maxlength="250"/> \
                <strong> ชื่อเพลง :</strong> \
                    <input type="text" name="music_name[]" id="textfield" style="width:200px;" maxlength="250" /> <br/>';
            document.getElementById('inputTd').appendChild(newspan);

        count++;
    }   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="highlight">
    <td id="inputTd" width="15%" height="20" align="right" style="position:relative; vertical-align:top;"><strong>Youtube :</strong>
        <span style="position:absolute;top:30px;left:80px;font-size:11px;color:red;">(ใส่เป็นรหัสไอดีของคลิป 11 หลัก) </span>
    </td>
    <td id="youtube_field" width="28%" align="left"><input type="text" name="youtube[]" id="textfield" style="width:170px;" maxlength="250" required/>
        <strong> Music name :</strong>
        <input type="text" name="music_name[]" id="textfield" style="width:200px;" maxlength="250" />

        <a href="javascript:void(0);" onClick="add_youtube_input();" style="color:blue;"> + เพิ่ม </a> <br/>
    </td>

</tr>