使用jquery，用自己的值替換html元素

我有一個表，有很多行。例如從一個行（所有行是相同的）：使用jquery，用自己的值替換html元素

<tr> 
    <td> 
     <input type="text" /> 
    </td> 
    <td> 
     <textarea cols="40" rows="3" ></textarea> 
    </td> 
    <td> 
     <select> 
      //options 
     </select> 
    </td> 
    <td> 
     <input type="text" /> 
    </td> 
    <td> 
     <input type="checkbox" /> 
    </td> 
</tr>

行可以被動態地由jquery的按鈕點擊後加入。我試圖做的事：按鈕後點擊添加新行（我這樣做）並更換前一行HTML元素（輸入類型=文本，文本區域，選擇輸入類型=文本，/[輸入類型=「複選框「必須是安全的]）與自己的價值觀。

如果我點擊行（anyrow）之後，我要回滾之前的操作。即用html元素替換文本。和htmlElement.val（）=文本。

30分鐘後添加： 我寫了input type = text元素和textarea元素這個。

$("#btnAdd").click(function() { 
     $input = $('#mainTable tbody>tr:last').closest("tr").find("td > input:text"); 
     $input.replaceWith($input.val()); 
     $textArea = $('#mainTable tbody>tr:last').closest("tr").find("td > textarea"); 
     $textArea.replaceWith($textArea.val()); 
});

這是個好主意嗎？

來源

2010-03-11 loviji

我知道，我的英語不是很好。但我正在嘗試與你溝通 – loviji 2010-03-11 08:27:55

@Auurag - 謝謝。 – loviji 2010-03-11 08:38:47

你能改說這部分嗎？你在這裏做什麼 - 「並用自己的值替換以前的Html元素（input type = text，textarea，select，input type = text，/ [input type =」checkbox「必須安全]）。 – Anurag 2010-03-11 08:42:40

我假設是這樣的，如果我理解正確的問題可能會奏效。

首先，清除所有的點擊每行處理程序。用它們的值替換最後的行元素。最後，將點擊處理程序添加到每一行以將值重新還原爲元素。

$('#btnAdd').click(function() { 
    $('#mainTable tr').unbind('click'); 

    var lastRow = $('#mainTable tr:last'); 
    // its simpler to clone now, and just replace entire row later when needed 
    var clonedRow = lastRow.clone(); 

    replaceWithValues(lastRow); 

    $('#mainTable tr').click(function() { 
     $(this).replaceWith(clonedRow); 
    ); 
}

因爲我猜所有的HTML元素（文本，複選框，文本區域，選擇）有val()功能，你可以忽略元素的您正在處理，而更換的類型。 ~~您需要某種方式來告訴哪些值屬於哪種類型的元素，儘管當您將這些元素還原爲元素時。~~

function replaceWithValues(row) { 
    var elements = $('td > *', row); 
    elements.each(function() { 
     var value = $(this).val(); 
     $(this).replaceWith(value); 
    }); 
}

編輯：你並不需要單獨還原每個項背，只是克隆整個行並與替換。

~~替換回元素應該也相當容易。您可以將類添加到每個行單元格，以指示哪種類型的元素會出現在那裏。~~

<tr> ... <td class="textField"> <input type="text" /> </td> ...

然後在replaceWithElement功能，您可以通過選擇類型的細胞，並與現有的值替換：

function replaceWithElements(row) { $('.textField', row).each(function() { var element = $("<input type='text' />").attr('value', $(this).text()); $(this).empty().replaceWith(element); }); $('.selectField') ... $('.textAreaField') ... }

來源

2010-03-11 09:36:59 Anurag

謝謝。你很好地理解我的問題。答案看起來像是真的。我試圖用你的想法。 – loviji 2010-03-11 09:45:07

我將使用先前的方法，因爲它更接近我的需求。我取代了一些和平的代碼。 var element = $（「」）; var element = $（「").attr('value'，this.text（））;這一個糟糕的工作。輸入元素創建，但價值有時不能顯示。也在IE中運行不好的元素（行）replaceWithElements（row）。我試圖分析這個問題。 – loviji 2010-03-11 10:25:47

我解決了一個問題： $（「").attr('value'，$ .trim（$（this）.text（）））; – loviji 2010-03-11 12:58:40

希望我理解你。你想在沒有輸入的情況下插入表格純文本？只有CSS才能達到所需的效果（樣式輸入的方式看起來像文本）。但這裏回答你的問題

首先添加一些id s或class es以更好地選擇所需的標籤。例如：

<input type="text" class="text"/> 
<input type="checkbox" class="save" />

比檢查，如果複選框被選中（可能是一個事件）做：

if($('input.save:checked').val() !== null) //checkbox is checked 
{ 
    $('input.text').each(function() //for each text input do ... 
    { 
     var inputValue = $(this).val(); //get the value 
     $(this).parent().html(inputValue); //insert the value instead of input 
    }) 
}

來源

2010-03-11 09:01:21

感謝您的想法，我會爲每個元素添加類。 – loviji 2010-03-11 09:10:01

我感到不安與您的動態添加和刪除行的想法。一般來說，將jQuery當作頁面外觀的修飾符並將實際內容設爲靜態會更清晰。

所以我通常更喜歡有一個表，包含您將要顯示的所有行，也許使用類屬性對它們進行分類，以及一個基於上下文來顯示/隱藏行選擇的jQuery插件。你的問題會消失或至少更容易分析。它會讓你的代碼更具可讀性和更靈活。

但是這可能不是你的情況的選項。

來源

2010-03-11 09:01:46 reinierpost

使用jquery，用自己的值替換html元素

回答

相關問題