用jquery動態添加列內容

我有兩列表有多行。此外，我還有一些隱藏字段來填充列中的值。現在我想在點擊某個按鈕時將隱藏字段的值加載到表格的列中。用jquery動態添加列內容

<table> 
    <tbody> 
    <tr> 
     <th>ACL</th> 
     <td></td> 
     <input id="field0" type="hidden" value="Access Control List"/> 
    </tr> 
    <tr> 
     <th>Bcc</th> 
     <td></td> 
     <input id="field1" type="hidden" value="Blind Carbon Copy"/> 
    </tr> 
    ...... 
    </tbody> 
</table>

什麼簡單的方法來實現這個？

來源

2014-09-03 anjibcs

告訴我們你到目前爲止嘗試過什麼。 – 2014-09-03 21:38:37

如果你給你的表中的ID，並希望所有的輸入移動到相鄰的TD的：

$("#<your_button_id>").click(function() { 
    $("#<your_table_id> td").each(function() { 
     $(this).html($(this).siblings("input").val()); 
    }); 
});

來源

2014-09-03 21:42:18

這是不是更多依賴於「輸入」框中的HTML位置？如果我們將隱藏的文本框移動到頁面的不同部分，會發生什麼？ – anjibcs 2014-09-03 21:50:07

是的，它假定輸入框是td的兄弟，就像它們在您的示例中一樣。如果你想把它們移到其他地方，你可以通過id $（「＃id」）或class $（「。class」）來定位它們。 – 2014-09-03 21:55:22

你是否按照你想要的方式工作？ – 2014-09-03 22:01:37

你不需要保存在文本框中的值可以保存在HTML屬性前值：data-value

嘗試這種方式

<table> 
    <tbody> 
    <tr> 
     <th>ACL</th> 
     <td data-value="Access Control List"> 
      <button class="show-value">Show Value</button>    
     </td> 
    </tr> 
    <tr> 
     <th>Bcc</th> 
     <td data-value="Blind Carbon Copy"> 
      <button class="show-value">Show Value</button> 
     </td> 
    </tr> 
    </tbody> 
</table>

JAVASCRIPT

$(document).ready(function(){ 
    $(".show-value").click(function(){ 
    var theValue = $(this).parent('td').attr('data-value'); 
    $(this).parent('td').html(theValue); 
    }); 
});

來源

2014-09-03 21:47:50 kefy

如果您的意思是td元素旁邊的input，則解決方法是這樣的。我使用next()來引用下一個，但如果它是相同的級別但可以在之前，則可以使用siblings。

如果輸入處於較低級別，則還可以使用parent()或find()遍歷DOM。

見工作樣本：http://jsfiddle.net/3qw09a0p/

$(document).ready(function(){ 
    $("#mybutton").click(function() { 
     $("#mytable td").each(function() { 
      $(this).html($(this).next("input").val()); 
     }); 
    }); 
});

使用文檔準備方法，以確保您的內容已加載。

來源

2014-09-03 21:49:12

雖然已經足夠了答案對於這一點，我想補充我的方法：

$("input[type='button']").click(function() 
{ 
    $("input[type='hidden']").each(function() 
    { 
    $(this).parents("tr").find("td").text($(this).val()); 
    });  
});

沒有ID需要，就像<input type="button" value="Click"/>一個按鈕。
它也適用於您在問題中提供的表格，其中輸入未包含在列中，我建議您使用有效的HTML。猜你剛剛忘了，因爲你提到你會有一個2列表;）

來源

2014-09-03 22:05:23

用jquery動態添加列內容

回答

相關問題